Learn how to use CSS animation using keyframes with examples

CSS animation is the best way to animate transitions on our elements using a before and after style. CSS animation contains of two sections. The animation property itself and a set of keyframes that include before and after styles for the element in certain points. We can make animation with CSS transition as well which you can read about it here.

A few examples 

Simple animation

This is a simple example making a paragraph to slide in from the right animating the margin-right and the width through keyframe setup in one step:

p.slidein {
animation-name: slidein;
animation-duration: 3s;
`  animation-iteration-count: infinite;

`}`

`@keyframes slidein {`
`  from {`
`    margin-left: 100%;`
`    width: 300%; `
`  }`

`  to {`
`    margin-left: 0%;`
`    width: 100%;`
`  }`
`}`

Every animation must have a name(slidein here) and a duration. The other properties are optional and we will see them in other examples. We did set the animation iteration count to infinite here to see the animation all the time.

As you see the keyframe has the same name as the animation and some steps. It could have onestep or more. We will see more examples around it.

#### Shorten it

Lets shorten the code as much as possible. Animation has a shorthand which we can use:

`p.slidein {`
`  animation: slidein 3s``infinite;

}

That looks better. Doesn’t it.

Note that if a keyframe rule doesn’t specify the start or end states of the animation (that is, 0%/from and 100%/to, browsers will use the element’s existing styles for the start/end states. This can be used to animate an element from its initial state and back.

Now another example with a few steps

In this example we have three steps (at 0% and 30% and 100%) in our keyframe to animate the font size and we also added the alternate value to the animation to run it in both sides; back and forth:

@keyframes fontbulger {
0% {
font-size: 40px;
}
30% {
font-size: 20px;
}
100% {
font-size: 40px;
}
}

.box {
animation: fontbulger 2s infinite alternate;
}

If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. When an animation has a similar start and end point you could shorten the code as below:

@keyframes fontbulger {
0%, 100% {
font-size: 40px;
}
30% {
font-size: 20px;
}
}

All animation properties and values

As you might be wondering what are other animation properties and vaues are, I put all together in this class:

.box {
animation-name: fontbulger;
animation-duration: 4s; /* or: Xms */
animation-iteration-count: 10;
animation-direction: alternate; /* or: normal */
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
animation-fill-mode: forwards; /* or: backwards, both, none */
animation-delay: 2s; /* or: Xms */
}

Now shorten tis one:

animation: fontbulger 4s 2s 10 alternate ease-out forwards;

Combine animation and transform

We could use CSS transform in our animation as well:

@keyframes infinite-spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Multiple animations

We could also have multiple animations on one element by comma separating them in the animation syntax:

@keyframes fade { to { opacity: 0; } } @keyframes rotate { to { transform: rotate(180deg); } } .multiple { animation: fade 5s 1s infinite linear alternate, rotate 5s 1s infinite linear alternate; }}

This will animate both transform and opacity on the element.

Browser support 

We better use prefixes to have 100% cover on supported browsers. For the animation itself:

.element {   -webkit-animation: fade 4s 1s infinite linear alternate;   -moz-animation: fade 4s 1s infinite linear alternate;   -ms-animation: fade 4s 1s infinite linear alternate;   -o-animation: fade 4s 1s infinite linear alternate;   animation: fade 4s 1s infinite linear alternate; }

And for the keyframe:

@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@-webkit-keyframes fade { /* your style */ }
@keyframes fade { /* your style */ }

I have created a codepen for our examples here that you could play around with. Change the code and see the result for yourself:

You could find more details here and here. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.