Menu
Hey I am new to development so was trying to change background color when we change menu item, I have done that, but want to have some delay in changing of background color.I tried transition property but got no result.Is transition property not applicable to <body>?As I tried to provide 'id' to <body> and apply rule like this
<body id="color">
CSS
#color {
background-color: yellowgreen;
transition: background-color 2s ;
}
I am doing something wrong? What is the way to apply <div> to full page and apply the same rule?
695
asked Dec 23 '25 01:12
First, when using transitions, you need to add the -webkit for Safari - http://www.w3schools.com/cssref/css3_pr_transition.asp
If you want a transition effect that takes x amount of time, you can exclude the below transition-delay. But if you want your transition to be delayed by, say 2 seconds, then you can add the transition-delay and set it you the amount of seconds you want to delay the transition for.
#color {
background-color: yellowgreen;
-webkit-transition: background-color 2s ease-in; /* Safari */
transition: background-color 2s ease-in;
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
Here is a list of some timing-functions you can use for transitions - http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
Here is a fiddle to show you how the border-color transition takes .5 seconds to start on hover.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
