The Key to Keyframes - CSS Animations 2

Introduction

Like many animation software, CSS also uses keyframes. Keyframes, allows you to speed up animating process and memory. Basically, in keyframes you need to define only a few transformations at certain points in time, to get an animation running. For example, if define the starting and end point of the animation, like below.

Starting Point

Ending Point

The browser will automatically create the animation by filling in the positions of the elements from the starting to till the end point.

See the Pen First Lesson A by Original-Coding-Cult (@original-coding-cult) on CodePen.

Coding - A

Animations using CSS first require you to define the animation name, duration etc. Second you need to define the keyframes. Defining of the animation is done in the styles of the element.

#box {
  background-color: pink;
  height: 150px; 
  position: absolute; 
  width: 150px;
  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

That can be exhaustive to look at. Let us ignore the first four styles and focus on the ones down below. The first style allows us to give the animation a name. The second style allows us to specify the duration of the animation, in seconds. The animation-iteration-count defines, how many times we want this animation to repeat. Incase of our example, we want it to run for forever therefore, we say infinite. 

Then we come to the delay, which allows us give the animation a delay, which is 0 seconds for us. The animation-fill-mode allows us to tell the browser that once the animation has ended what style should we hold on to. Forwards, means that we retain the style defined in that last key-frame, backwards would mean that we want to retain the styles defined by the first keyframe. 

Animation-timing-function is quite tricky to understand. When we define the keyframes, the browser, joins the keyframes using a graph. The curve of the graph defined how the elements 'behaves' during the animation. In our case, linear means that the curve is straight. 

Below is a comparison between all the timing functions.

See the Pen First Lesson B by Original-Coding-Cult (@original-coding-cult) on CodePen.

Instead of always doing the hard work of declaring six styles for an animation, using the shorthand property can be very useful.

animation: name duration timing-function delay iteration-count fill-mode;

animation: myAnimation 2s linear 0s infinite forwards;

There also exist styles like animation-direction, which allows you to make the animation run forwards, backwards or alternate and animation-play-state which defines whether the animation is paused or not.

For more information on the styles, you can refer to the W3 Schools page on the same: https://www.w3schools.com/css/css3_animations.asp

Coding - B

Now that we have understood the animation styles. Let's move on to the keyframes. We declare the keyframe the following way in the style tag only. Remember this doesn't work for inline CSS,

@keyframes animation-name {
  /* The code */
}

Now to declare the keyframes we use percentages. To refer to the beginning of the animation we say 0% and to refer to the end of the animation we say 100%. We can make our animation much more complex by using other percentages like 10%, 45%, 66% etc.

@keyframes myAnimation {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(300px, 0px);
  }
}

Although, since we are referring only to the end and start points, we can just use the from-to method. 0% means from and 100% means to.

@keyframes myAnimation {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(300px, 0px);
  }
}

We can further simplify down the code by just using 'to'. We can only do this when we have specified the location of the element in it's style.

@keyframes myAnimation {
  to {
    transform: translate(300px, 0px);
  }
}

Conclusion

Today we learnt a lot about animations. I encourage you to play around with various styles used in @keyframes. Animations are not meant for transforms only, but it also works with background, colors, filters, borders and much more. In the next few lessons I would like to go over a few examples of animations in CSS. 

Till then bye!