CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to black on hover, usually the color changes immediately when you hove on it. Adding CSS transitions allows you to add a smooth transition on this change, and to customize the duration and the speed curve of the transition effect.
The CSS Transition occurs when an element changes from one state to another(like the hover effect I mentioned above), so the transition is always limited to 2 states: beginning state and ending state.
However, CSS Animations can have multiple states between the beginning and ending states, so animations can give you more control.
Where a transition only goes from A to B, an animation can go from A, B, C to D. Or any number of stages as needed.
The transition property is a shorthand property used to represent up to four transition-related longhand properties: transition-property, transition-duration, transition-timing-function, transition-delay.
div {
transition: background-color 0.5s ease-in 1s;
}
Animation
CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using @keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, number of repetitions, and other attributes using the animation property.
In keyframes, you can put some CSS blocks to create the steps of the animation. The steps can be specified by from & to or percentages. In these blocks, you can add CSS declarations to customize the properties that will be changed.
You should give a name to your keyframe animation so that you can use it on your elements.
@keyframes myAnimation {
from {color: red;}
to {color: blue;}
}
/* this will be similar with using transitions */
@keyframes myAnimation {
0% {color: red;}
25% {color: orange;}
50% {color: yellow;}
75% {color: green;}
100% {color: blue;}
}
/* try it out to see how this is different from the previous example */
After setting the keyframes, you can use it in your elements with animation property. It’s also a shorthand property like transition property, but it has more attributes for you to specify:
Transition
div { transition: background-color 0.5s ease-in 1s;}Animation
@keyframes myAnimation { from {color: red;} to {color: blue;}}/* this will be similar with using transitions */@keyframes myAnimation { 0% {color: red;} 25% {color: orange;} 50% {color: yellow;} 75% {color: green;} 100% {color: blue;}}/* try it out to see how this is different from the previous example */