CSS Animations
If you're looking to add an extra zest to your already perfect webpage, why not add some animations?
It could be in the form of smooth transitions and waverings to convey a natural consequence of the users action, rather than cold magic.
So, how do we animate HTML elements?
We just need to add 2 sections of code into your CSS.
First, on the element we want to animate, we'll need to specify the ammount of time it will animate, and the name of the animation.
animation-duration: 2s;
animation-name: rainbowWave;
Second, we'll need to add a new "at-rule" (@keyframes) with the information how the element should look at different times of the animation.
In this example, as soon as the element is rendered the element will start with a red background, then will gradually become green for the next second, and finally transition to blue.
@keyframes rainbowWave {
from {
background-color: red;
}
50% {
background-color: green;
}
to {
background-color: blue;
}
}
At the end of the animations the styles will jump back to the ones specified outside the animation.
Just a word of caution, while small animations can give a nice feel to your website, too much animation can distract the user too much, make the website look childish and can put a big burden on the rendering engine.