Introduction to CSS animations

By |September 29th, 2016|Categories: CSS, CSS3|

Humans are drawn to moving shiny objects. Our natural reflexes to notice movement is one of the reasons adding an animation to a website or app is a powerful tool. It has the capability to accentuate certain parts of the website or draw interest to a product.

When done well with beautiful design elements and interaction, an animation can enhance the overall experience of the website. The word animate means to bring to life, and that’s exactly what you’ll be doing with your new skills. We’re going to take a look at some very basic parts of CSS animation to get you started.

Fundamentals of CSS Animations

There are two major aspects of CSS animations. The most important one is the @keyframes Rule. When you are specifying a CSS style inside the @keyframes Rule, an animation will slowly change from its current style to different styles at set predetermined times.

We’re going to look at animating a simple box and moving it around the screen through the @keyframes Rule. The first thing you’ll want to create is a simple box, give it any dimensions you’d like and any color. The color and position are the attributes we’re going to be changing.

In order for you to get your animation to work, you must bind the following code onto the previous element. First you’ll choose a name for your @keyframes. A name of our choosing will be (flashBox). Then our stages for changes will be listed out in percentages from 0%-100%, these percentages being representative of the rate of change. After this you’ll choose your CSS style changes, i.e color and position. Here is a sample of how your @keyframes code could look.

Right now this code will not run because there are no animation properties attached to the previous element. Now it’s time to learn some animation properties so you can create and finish a simple flashing moving box.

Animation Properties

The animation property attached to the element is used to call @keyframes from inside a CSS selector. Animations have multiple properties. Here are some of the main properties and how to use them.

  • animation name: @keyframes (name): defines the name of the animation, in our case (flashBox)
  • animation-duration: length of time or total duration it takes the animation to run from start to finish
  • animation-timing-function: sets the animation speed
  • animation-delay: delay before an animation starts
  • animation-iteration-count: how many times it the animation will iterate
  • animation-direction: ability to change the looping direction
  • animation-fill-mode: specifies which styles will be applied into the element

The following code is a couple includes a couple of these animation properties to the element. One is the animation name, that links the element and defines the animation. The other is the animation-duration which directly correlates back to the percentages rate of change. Lastly, the animation-iteration-count is how many times the animation is going to play over.

The entirety of this code can be seen in action in the codepen below, feel free to watch how it works and edit or create your own type of animation.

See the Pen mArqvp by Mike Colagrossi (@SantinoMPC) on CodePen.

Mike Colagrossi