How to Create CSS Animations and Transitions – @keyframes

Feb 09, 2016
avesdesign

To make websites more interesting for users, web developers tend to add few animations here and there. Back in the days, animations were added to the website in a form of GIFs, then the JavaScript animations became popular. Nowadays web developers tend to create animations and experiment with CSS and testing its limits in hundreds of different ways.

To create interesting CSS animations you basically need to know how to use CSS3. To be more precise, you need to know how to use the @keyframes rule. With CSS3 keyframes rule you can create beautiful, smooth animations that doesn’t require tons of scripting.

How to Create CSS Animations and Transitions @keyframes

The @keyframes – Definition and how to use it

In CSS3, the @keyframes rule specifies the animation code, or to be more precise, it holds the styles of the element that it needs to have at certain times in order to produce an animation. With this rule, you can create animations by gradually changing the CSS styles from one set to another. Also, you can change the set of CSS styles as many times as you like during animation to create different transitions.

To use the @keyframes rule and create animations, you should specify when the CSS style change should happen in percents, or using the keywords ‘from’ and ‘to’ (it’s the same as 0% and 100%). Remember, 0% is the beginning of your animation and 100% is when the animation is done. To make the animation to work, you should bind your @keyframes to an element, for example a <div> element.

The @keyframes Rule and browser support

The only negative thing (or not) about CSS animation is that the older versions of browsers might not support it. So if you and your website visitors use a newer version of your browsers of choice, you shouldn’t have any problem using CSS animations on your website.

Browser Chrome Mozilla Firefox Safari Opera Internet Explorer
Version 43.0+
4.0 -webkit-
16.0+
5.0 -moz-
9.0+
4.0 -webkit-
30.0+
15.0 -webkit-, 12.0 -o-
10.0+

To get the best browser support, always make sure to define both 0% and the 100% selectors. Also, make sure to use the animation properties to control the appearance of your animation and to bind your animation to the selectors.

@keyframes Rule – Syntax & Property values

The syntax of @keyframes rule is the folowing:

@keyframes youranimationname {keyframes-selector {css-styles;}}

From this syntax you can see that the @keyframes rule has 3 required property values: youranimationname, keyframes-selector and css-styles. The first one (youranimationname) defines the name of your animation, the second one (keyframes-selector) defines the percentage of your animation duration (instead of percents you can also use from … to) and the third one (css-styles) defines the properties of the css styles that you’re going to use in your animation. If you know the syntax, you can easily create CSS animations.

Create CSS Animations with @keyframes – Example

For this simple css animation using the @keyframes rule, we’re going to create a simple bouncing ball. This is the CSS code:

.bouncyball {
width: 100px;
height: 100px;
background: #3366ff;
border-radius: 50%;
position: absolute;
margin-left:30%;
/* Chrome, Safari, Opera */
-webkit-animation-name: bouncingball;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction: alternate;
/* Standard syntax */
animation-name: bouncingball;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bouncingball {
0% {bottom: 0px;}
100% {bottom: 50%;}
}
/* Standard syntax */
@keyframes bouncingball {
0% {bottom: 0px;}
100% {bottom: 50%;}
}

To see this bouncing ball in action you only need to use a div element and call the class like this:

<div class="bouncyball"></div>

And these are the basics of how you can create CSS animations. Once you learn how to use the @keyframes rule you’ll be able to create CSS animations with different shapes and transitions. So have fun and experiment with different animations and transitions using only CSS3.