Simple, beginner steps: CSS animations!

Let's talk about a fun (and sometimes functional) topic-- animating our CSS! Here's some of the basics:

CSS animation is a really fun topic, and something I love to use to add some fun and life to my projects.

1.The first step is specifying keyframes for the animation.

Keyframes hold what styles the element will have at any given time.

@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
}

When we specify CSS styling inside the @keyframe, the animation will change from the current style to the new style over a time (that we specify).

2. Second, we have to bind the animation to some element, like an img, div, etc.

For example:

div {
  width: 300px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 10s;
}

We 'bind' the animation to the div by calling it in the animation-name property. We also specify that it will take 10s for the animation to execute.

!! Don't forget-- once the animation finishes, the element goes back to its original specifications. So if we had declared the background color blue, after the animation completes the div would go back to blue.

3. Deciding animation-duration property

animation-duration specifies how long it will take the animation to complete. If you don't specify this property the animation will not work because the default value is 0, which is 0 seconds.

4. Animation timing / breakdown

In our example above, our start point was the 'from' value and the finish was our 'to' value. You can also use percentages to represent the completion percentage, which means we can break it down as much as we'd like.

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(1800deg);
  }

  80% {
    transform: rotate(2085deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}

In this example I was having a ball roll across the screen and come to a stop. This is the keyframe for the rotation aspect. The rotation from 0-60% completion is more, and then it slowly lessens until completion at 100%.

Some other animation properties:

• animation-delay will specify a delay time before the animation executes. You can also do negative values, which will make the animation start as if it's already been playing for X number of seconds.

• animation-direction decides the direction of the cycle. You can have values 'normal' (default/forward), 'reverse' (backwards, duh), 'alternate' (first forward, then backward), or 'alternate-reverse' (the opposite of alternate)

• animation-iteration-count is how many times the animation will execute from start to finish. You can use the value 'infinite' if you never want it to stop.

• animation-timing-function can specify the speed curve of the animation. Values can be 'ease' (start slow, execute fast, end slow), 'linear' (same animation speed start to finish), 'ease-in' (slow start only), 'ease-out' (slow finish only), 'ease-in-out' (slow start and end)

CODING TIP:

When writing out animations in CSS, sometimes I like to keep the properties separate, because for me it's easier to read:

div {
  animation-name: example;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

But you can also simplify:

div {
  animation: example 5s linear 2s infinite alternate;
}

Those are some basic tips, have fun with your newfound powers!