TRANSITION PROPERTY
Additional Property:
- Transition timing function: how the change in the property will occur. It has five different values:
- ease: which is applied by default, if you don't use the transition timing function, what it does is it makes the change start slow, then go faster in the middle, and then slow down a bit before the end.
- linear: in which the change will occur at the same rate from the beginning to the end throughout the transition duration.
- ease-in: in which the change starts slow and then speeds up before the end.
- ease-out: which, unlike ease-in, starts fast and then slows down at the end.
- ease-in-out: in which the change starts slow, then speeds up in the middle, and then ends slow. It's kind of like ease.
- Transition-delay: It simply represents the time the transition waits before it starts. It accepts time values in seconds or milliseconds.
button{
width:20rem;
height:5rem;
text-transform: uppercase;
font-size: 1.4rem;
background-color: #54483a;
border: none;
outline: none;
color: #fff;
/* this is prop */
transition-property:background-color;
transition-duration: .6s ;
transition-timing-function: ease-in;
transition-delay: 2s ;
}
button:hover{
background-color: rgba(23, 128, 23, 0.856);
}And now when I hover over the button, it should wait 2 seconds before the change in the background colors starts. And that is simply the transition delay property.
you can see the code demo.
Can we use the transition on more than one property? means, can we make more than one property change smoothly? Well, the answer is yes.
Here in CSS, I add the color: red when hovering over it So when I hover over the button, I want the background color to change, and the text color to change from white to red.
button{
width:20rem;
height:5rem;
text-transform: uppercase;
font-size: 1.4rem;
background-color: #54483a;
border: none;
outline: none;
color: #fff;
/* this is prop */
transition-property:background-color;
transition-duration:.2s ;
transition-timing-function: ease-in;
transition-delay: ;
transition: all 4s;
}
button:hover{
background-color: rgba(23, 128, 23, 0.856);
color:red;
}
Now, let's view this in the browser. I'll hover over the button and you'll see that the text color changes fast with no transition. So how can we apply the transition to it? It's so easy, add a space, then another transition property, which is the `color` of course. and that's it.
we can change as many properties as we want Great!
But there is a shorthand property that we can use to mix all of them in one single line, and it's just called `transition`.
/* this is short hand property */
transition: background-color 3s ease-in 2s, color 3s;Not all CSS properties can be used with transitions because the change in these properties doesn't happen gradually. It changes from one state to another without any intermediate values. Properties that are not animated include one like a background image because it can't change gradually from one image to another. You can experiment with these properties to see how they look while transitioning.