Unlike the old days of Flash, where creating animations required third-party applications and plugins, today we can accomplish practically the same things with a lot less overhead, better performance, and greater scalability all through CSS only.
Forget plugins and third-party software! All we need is a text editor, some imagination, and a bit of patience to wrap our heads around some of the animation concepts CSS brings to our plate.
Before we dive into all the animation properties, we will use the following markup and animation structure as our base:
HTML:
<div class="element"></div>
CSS:
.element {
width: 300px;
height: 300px;
}
@keyframes fadingColors {
0% {
background: red;
}
100% {
background: black;
}
}In the examples, we will only see the .element rule since the HTML and @keyframes fadingColors will remain the same.