Simple CSS Animation Examples to Help You Figure It Out
Tags: css, javascript, webdev, tutorial
Published: 2020-07-25 06:37:59

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.

![Ric Flair in all his glory](https://media.giphy.com/media/LMVNa2wO0KK908UEXO/giphy.gif)

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](https://codepen.io/cooljasonmelton/pen/BajbbYN) or clone the [repo](https://github.com/cooljasonmelton/css-animation-example).*

## Example 1: Wiggling Hand
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2utxaxna9ih00mkdhwce.png)

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!*
```CSS
/* 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6suhoy0gja77davwguxw.png)

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!
```CSS
/*  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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v7oot3sqqe3blqrmh3uh.jpg)

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!
```CSS
/*  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](https://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others/25110511#25110511) 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