Introduction to animation with CSS

I've been working on a twitch overlay and animating items has become an important part of it.

These are the badges I've created when people donate bits. The gold outline is on the latest donation. But I do not simply want it to populate on the screen, I want it to be more obvious for viewers that a donation is coming in.

This is where the 'animation' and '@keyframes' attributes come into play. To create the animation, we will be using keyframes. Here is how it is written:

@keyframes [name-of-animation]{
      from {
          [starting-point]
      }
      to {
          [ending-point]
      }

    }

You can write it with 'from' and 'to' or you can also do it with percentages:

@keyframes [name-of-animation]{
      0% {
          [starting-point]
      }
      50% {
          [mid-point]
      }
      100% {
          [ending-point]
      }

    }

Keep in mind that these can be any percentages you want.

This is what I did for my slide in animation.

@keyframes bitSlideIn {
  from {
    transform: translateX(-700%) scale(1.1);
    border: 1px solid black;
  }
  to {
    transform: skew(-20deg);
  }
}

The name of this animation is bitSlideIn. The starting point is way to the left, scaled up to 10% larger, and with a black border. And that will transform to a skew of -20 just to give a transitioning look from a rectangle to its final shape.

To use our new animation in our element, we need to add the 'animation' css attribute. So here is how I wrote mine:

.bits-donation{
  animation: bitSlideIn 1.2s ease-in;
}

So breaking this down:

bitSlideIn is the name we gave our keyframes animation. 1.2s is the duration that this animation will occur and ease-in is an animation property that specifies the speed curve of the animation. 'ease-in' basically specifies that our animation start out slow and speed up a bit.

And that is basically it.