I’ve been diving into css more and have quickly found out how useful keyframe animations can be. They allow for fast loading animations which really enhance a site. I’ll show some examples and just how useful this can be!
Take the following:
It’s a simple example that allows you to stretch an html div. You start by adding a div:
<div class="stretch-example"></div>
Next we add the css for the div itself, and then apply the animation within the css class.
.stretch-example {
height: 100px;
width:100px;
background-color:red;
border-radius:3px;
padding: 10px;
/* Shorthand syntax */
-webkit-animation: bgcolorchange 2s ease infinite normal;
-moz-animation: bgcolorchange 2s ease infinite normal; /* Fx 5+ */
-o-animation: bgcolorchange 2s ease infinite normal; /* Opera 12+ */
animation: bgcolorchange 2s ease infinite normal;
}
Then finally, we write a css function using the @keyframes functionname. We add the keyframes using percentages within the css function and add our css parameters. Wallah! Instant animation that is easy to read, write, and edit.
The animation parameters also allow things like easing, repeating infinitely, etc. For more information visit w3schools
@keyframes bgcolorchange {
0% {
background-color:#ccc;
width:100px;
}
50% {
background-color:#666;
width:200px;
}
100% {
background-color:#ccc;
width:100px;
}
}