Creating CSS Animations with @keyframes

Learning the best ways to use CSS can sometimes feel like this:

To avoid ^^ I want to share a simple, elegant way to create CSS animations using keyframes. When you think about it, animating an element is in fact just changing the style or look of that element from one period of time to another. That style could be anything. It could be that element’s position on the page, its color, its shape, its size. You name it, you can animate it.

What @keyframes give us is a set of rules and points in time at which to alter our element in a specific way, thus setting up the animation.

This is a simple keyframes animation that is altering a 100px x 100px div element with the class “movingBox"from a red square into a yellow circle as it slides down the page.

Each rule in our keyframes mymovedescribes how our element should be rendered at a specific time within our animation. At 0% when our animation begins, our element is a red square at the top of the page. By the 100% mark, when our animation completes, our square has transitioned into a yellow circle 100px away from the top boundary of its space.

To implement this simple animation onto our div class="movingBox" all we need to do is add the animation property to the .movingBox styles in our CSS.

The animation property is a shorthand property that can hold information regarding:

animation-title: 
animation-duration: 
animation-timing-function: 
animation-delay: 
animation-iteration-count: 
animation-direction: 
animation-fill-mode: 
animation-play-state: 

While most of these sub-properties are optional to include, the animation-title and animation-duration must always be included. You can probably intuit what these specify, but if not, they refer to the name of the animation (for our purposes the name of the keyframes we created) and the length that the animation should take to complete one cycle. If the animation-duration is omitted, your animation will never run.

What if we wanted to create an animation that makes an element appear on the page out of thin air? Think about a web page where, when you arrive, you see the page title zoom in (or glide in) from somewhere else and land right in the center of the page.

In our moveInLeft keyframes we’ve defined our element as starting at a position that is -100px on the X axis ( transform: translateX(-100px) ) from where we have it set up to be in our styling of the element. We see that 80% through our animation our element goes past its designated position on the X axis then lands exactly where it’s programmed to be at 100%.

100% { 
   opacity: 1;
   transform: translate(0)
}

The transform: property, when set to translate(0) means that it should be positioned exactly as its styled in our CSS.

Using keyframes is a clean and easy way to animate any HTML element. If you haven’t tried it out before I recommend setting up a document and playing around with it!