Creating Transitions with CSS
How to create basic transition animations on links and other elements with CSS.
Edited: 2019-10-14 13:10
Creating transitions when hovering links, and other HTML elements, can be done using the transition property in CSS. It works by feeding it a comma separated list of attributes you want the animation applied on.
If you are changing the color of links on hovering, the below would create a nice fade transition effect between the normal state and the :hover state:
a {
color:rgb(100,100,245);
transition:color 0.2s;
}
a:hover {
background:rgba(225,225,225, 0.5);
}
It also works for other elements. Keep in mind you might still need to use the Pseudo-Classes in the right order :link, :visited, :hover, :active (LVHA). It should be fine when only changing the hover state, however.
Adding multiple transitions
As mentioned earlier, to add transitions on multiple properties, you simply separate each property with comma, like so:
a {
color:rgb(100,100,245);
transition:color 0.2s,background 0.2s,font-size 0.5s;
}
The above would create a smooth transition on color, background and font-size. If you are actually changing those on the :hover state. You can add more as needed.
More complex animations with CSS keyframes
With CSS keyframes it is possible to create more complex animations. They give a more detailed control over what is going to happen, and when you want it to happen. For instance, you can use the animation-delay property to control when the animation is going to start. This can be useful if you want a HTML element to appear some time after the page is opened.
You can also control other aspects of the animation, such as whether it is supposed to persist at the final state, or revert to its initial state. This can be done with the animation-fill-mode property.
As with many other CSS properties, all can be set in a single deceleration using the animation short-hand.
Tell us what you think: