Like it or not, CSS animations are one of the trends that will definitely shape the future of web design industry. Even though JavaScript is still heavily used to create animated states on numerous events on the page, its involvement is in decline. Thanks to great support from browsers, only IE 8,9 and Opera Mini 7 are out, there is no reason why you should delay to use them any more. However, to be able to use something, you have to understand it first. So, let’s take a look at the syntax and how they work.
CSS animations are divided of two parts. First part is the rule you write inside the selector for element you want to use the animation on. The simplest version of syntax for animation rule look like this:
CSS:
element {
animation: animation-name duration;
}
Animation-name means the name you chose for your keyframes. Duration property is in seconds and defines how long will it take to finish the animation (from 0% to 100%). The higher the value for time, the longer animation will be.
You don’t have to settle just for these two properties if you want to create some more advanced animation. All available properties are delay, direction, duration, fill-mode, iteration-count, animation-name, play-state and timing-function. With delay, you can set when (after loading the page) the animation will start. Value is set in seconds. Direction says if animation should be played in reverse on alternate cycles. Fill-mode says what styles will be applied for the element when the animation is not playing (finished or delayed state). Iteration-count sets how many times animation should be played. You can use number or, for infinite number of iterations, use keyword “infinite”. Play-state has two values – “paused” and running. Paused means that animation is paused and will not start. Running means that animation will start when page is loaded (default value). Timing-function sets the speed of animation. Default value is “ease”. Another available are “ease-in”, “ease-out”, “ease-in-out”, linear and cubic-bezier. Whole syntax looks like this:
CSS:
element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
Next part is something called keyframes. This is the core of any animation. Syntax starts with “at” sign followed by keyword “keyframes”, name of the animation and end with curly brackets. In case of prefixed version, at sign is immediately followed by hyphen, prefix and then name of animation. Name of animation can be whatever you want.
CSS:
@-webkit-keyframes jump { … }; /*prefixed version*/
@keyframes jump { … };
Keyframes consists of individual steps. You can imagine it like a strip of images that creates movie. These steps are labeled either by percentages or “from” and “to” keywords (in case of simple two-step animation) and followed by curly brackets. They looks little bit like media queries. When you use percentages, the first step is always 0% and last 100%. Value for steps in between depend on how many steps that particular animation include.
CSS:
/*Prefixed version*/
@-webkit-keyframes jump {
from { … }
to { … }
};
@keyframes jump {
from { … }
to { … }
};
@keyframes leftRight {
0% { … }
50% { … }
100% { … }
}
@keyframes leftRight {
0% { … }
25% { … }
50% { … }
75% { … }
100% { … }
}
Code for the animation is then written inside the curly brackets for individual step.
Let’s take a look at some examples … First, we will create simple animated bar filling up with color. To do this, we have to define just two steps – one for starting state and second for ending state. HTML structure will be simple – one div called “wrapper” and another called “bar”. Div with class “bar” will be animated.
HTML:
<div class="wrapper"> <div class="bar"></div> </div>
Styling our divs will be simple. Let’s just set width and height for “wrapper” div and then height of 100% and color #c00 for “bar” div. Width for “bar” will be set in animation keyframes.
CSS:
/*Styles for wrapper and bar*/
.wrapper {
width: 400px;
height: 100px;
}
.bar {
height: 100%;
background: #c00;
}
That’s for styling. Now we will set the keyframes. The name for keyframes will be “fill” and will consist of two steps. In the first one will be defined width with value of 0. In the second the value will be 100%.
CSS:
/*Keyframes*/
@keyframes fill {
from {width: 0;}
to {width: 100%;}
}
Last step is to create an animation rule for “bar” div. First is the name of keyframes and right after it will be the duration. To make animation a bit slower we will set the duration to 5 seconds (5s).
CSS:
.bar {
height: 100%;
background: #c00;
animation: fill 5s;
}
You can create easy sliding bar from top by deleting the height of “bar”, setting width to 100% and then changing the width inside keyframes to height.
CSS:
/*Keyframes*/
@keyframes fill {
from {height: 0;}
to {height: 100%;}
}
.bar {
height: 100%;
background: #c00;
animation: fill 5s;
}
Another example can be a jumping ball. In HTML will be one div with class “ball”.
HTML:
<div class="ball"></div>
CSS styles for ball will be position relative – we will change “top” property in animation, width and height will be 50px, background color “tomato” and border-radius 50%.
CSS:
.ball {
position: relative;
width: 50px;
height: 50px;
background: tomato;
border-radius: 50%;
}
Keyframes will consist of three steps. In the first step we will define that ball will start at top 0 , then it will “fall” to top 180px and then return to 0.
CSS:
@keyframes jump {
0% {top: 0;}
50% {top: 180px;}
100% {top: 0;}
}
To use this animation on “ball” div we will define animation rule for keyframes with name “jump”, set duration to 1.5s and iteration-count to “infinite”. This will create forever jumping ball.
CSS:
.ball {
position: relative;
width: 50px;
height: 50px;
background: tomato;
border-radius: 50%;
animation: jump 1.5s infinite;
}
Summary
You can use CSS animations to create much more complex effects. For example, how about to slide down the whole page with menu after loading the homepage? Use your imagination and play with it. I will also create some more complex tutorial and post in couple days. AD
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
