CSS Animations

I’ve always known a little CSS, but it has never been my strongest skill set, as there are many properties of CSS and the ways they interact is not always clear and can be unexpected. So, this week I decided to further my skills and learn how to do CSS animations using keyframes, which make the process of creating animations surprisingly simple.

Before learning about keyframes we first need to learn about CSS transitions and transformations. There are many transitions you can do in CSS but it is a common held belief that you should only really only transition four things for performance reasons if you are adding your transitions to a big app or working on productions level code you should definitely stick to these four but if you are just making some cool stuff in CSS feel free to look up more.

	transform: translate()
	transform: scale()
	transform: rotate()
	opacity

Transform translate can take in one to two inputs and basically allows you to move the element by a varying amount in any directions. Transform scale simply allows you to shrink or enlarge an element and rotate and opacity are both pretty self-explanatory. So, with these tools along with keyframes we can make some pretty cool CSS animations.

Keyframes follow a pretty simple syntax but requires some values first:

  	animation-name: name;
  	animation-duration: 10s;
  	animation-timing-function: linear;
  	animation-delay: 0s;
  	animation-iteration-count: infinite;

The animation-timing-function is how fast you want certain parts of the animation to move at certain times, here its linear it will move at the same continuous speed. So, if you were animating a car it would move across uniformly, but if you want to make it look like the car was speeding up maybe you’d use an exponential timing function. The rest of the animation properties are pretty straight forward, so I won’t go over them. Then the actual syntax of the keyframe:

@keyframes name {
  0% {
  }
  25% {
  } 
  50% {
  }
  75% {
  }
  100% {
  }
}

Each one of these percentage fields are where you put your transformation and other values, where each percentage value is the percentage through the animation. Important to note you are not limited to four values only at these four percentage values but can have anywhere between one and 100 values (each value could be 1% {}, 2% {}, …, 100% {}). Within each of these percentage values you write your transformation for example if you wanted the HTML element to grow in size and change colors you’d have something like this.

@keyframes changeColorsMakeBig {
  0% {
    transform: scale(2);
    background: red;
  }
  25% {
    transform:  scale(1);
    background: green;
  } 
  50% {
    transform:  scale(2);
    background: pink;
  }
  75% {
    transform:  scale(1);
    background: orange;
  }
  100% {
    transform:  scale(2);
    background: yellow;
  }
} 

So, this animation would change the elements colors and oscillate the size back and forth. So now you have the basic tools to make animations, there are many fun and cool examples of animations made with key frames you can find all over the internet, but codepen is a good place to start and codepen also makes it easy to test out your own animations.