Simple CSS Animation Examples to Help You Figure It Out

Sometimes I want to add a little flair to a project so I start researching JavaScript libraries. Then I realize I can just use CSS.

Before you bring in that giant JavaScript library, consider a simple CSS animation like this one. This took me around 15 lines of code.

In the following, I’ll show you two simple examples to demonstrate how easy it is. Then, I’ll show you the slightly more complex animation from the gif.

If you’d rather see the raw code and explanatory comments, skip to this CodePen or clone the repo.

Example 1: Wiggling Hand

This first example deals with wiggling a hand back and forth. A.K.A. "Waving".

I could imagine a use case where you want to draw attention to an element by giving it a little wiggle as the page opens.

To make this work, we’ll follow these steps:

1. Set up a @keyframes at-rule that dictates the behavior of the animation.
2. Assign the name of your @keyframes rule to the target element as its animation-name.
3. On the element, specify the animation-duration and any other animation specific properties, e.g. animation-iteration-count. Ta-da!

/* WIGGLING HAND A.K.A. WAVING */
/* set keyframes name as 'wiggle' */
@keyframes wiggle { 

/* 
    when applied, 'from' sets starting property, 
    'to' sets ending property 
*/
    from {left: 20px;} 
    to {right: 20px;}
}

.hand-img{
    /* position must be relative so left and right works (above) */
    position: relative; 

    /* select animation-name by @keyframes name */
    animation-name: wiggle; 

    /* select animation-duration in seconds */
    animation-duration: 1s; 

    /* optional: how many times animation plays */
    animation-iteration-count: 6;
}

Example 2: Color Circle

The first example employs a from / to syntax of @keyframes. This time we are more precise with the timing of property changes. To do this, we specify at what point a property will change with a percentage of the duration.
Bam!

/*  COLOR BOX CSS  */

/* 
    percentages refer to the point in the duration 
    that each property is applied
*/
@keyframes color-morph {
    0%   {background-color:blue;}
    25%  {background-color:yellow;}
    50%  {background-color:red; }
    75%  {background-color:green; }
    100% {background-color:blue; }
}

.color-circle{
    border-radius: 50%; /* makes div a circle */

    height: 300px;
    width: 300px;

    background-color: blue;

    /* animation settings */
    animation-name: color-morph; 
    animation-duration: 3s;
    animation-iteration-count: 2;
}

Example 3: Ric Flair Fly-In List

For the final example, I have set up a series of animations that trigger after a staggered delay. It feels like a PowerPoint when the bullets fly in from off screen. Kinda fun.
Woooooo!

/*  RIC FLAIR ANIMATION CSS */

/* 
    animation starts text off screen 
    and pulls it to original placement 
*/
@keyframes fly-in {
    from {left: 110vw;}
    to {left: 0}
}

li {
    position: relative; 
    animation-name: fly-in; 
    animation-duration: 3s;  
}

/* 
    the following delays each animation start in seconds
    i've staggered each item's a half second later and
    skipped first item so starts immediately 
*/
.item-2 {  animation-delay: 0.5s; } 
.item-3 {  animation-delay: 1s; }   
.item-4 {  animation-delay: 1.5s; } 
.item-5 {  animation-delay: 2s; }
.item-6 {  animation-delay: 2.5s; }
.item-7 {  animation-delay: 3s; }

Caveat

There are cross browser issues with animations that typically can be resolved with a browser-specific vendor prefix. Check out this article on Stack Overflow for more info.

Conclusion

CSS animations intimidated me, but ultimately, they had one of the quickest learning curves. I hope you pick up on it and find a fun way to use one on your next project.

Thanks for reading!

Resources:

CSS Animations
https://www.w3schools.com/css/css3_animations.asp
Why Doesn’t CSS Feature Work in Browser But Not In Others?
https://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others/25110511#25110511