Beginner’s guide to CSS animations

CSS animations can be a great way to bring your webpage to life with many different visual effects. Animation and effects can be a great way to grab the user’s attention and guide them through how to use the site. Having context specific animations can be effective as well, like having a shopping cart button glow after adding an item to the cart. The core parts involved in setting up CSS animation are keyframes and animation properties.

Keyframes are the most important part of CSS animations. Keyframes are what is used to break down an animation cycle into segments. At each of these segments, we can then adjust various properties of the element we are animating. Keyframes for an animation can be declared in a .css file with the keyword @keyframes , followed by the name you want to give the animation.

@keyframes myAnimation {
}

Inside this keyframes block there will be two important values. First, there should be animation stages. They can either be listed out as percentages, 0%, 25% etc…, or just a from and to, to indicate the beginning and end of the animation. At each step of the way, they can take a certain attribute of the element being animated, and change it’s properties. In the example below, the fadeOut animation will have an object’s opacity be reduced from 1 to 0 over the course of the animation cycle, which will appear to make the element fade out.

@keyframes fadeOut {
   from { opacity: 1 }
   to { opacity: 0 }
}

So now this animation has been created, but how can it be implemented to fade out specific HTML elements? For this we need an animation property called animation-name. This can be added to the css selector of whatever you are wanting to apply the animation to. It can then be set with a value of the name of the keyframes that define the animation. The example below will take an element with the id of element-to-fade-out and will fade it out. This example also uses an animation property called animation-duration, which can be set with a value in seconds of how long the animation should take to go from 0% to 100%.

#element-to-fade-out {
   animation-name: fadeOut;
   animation-duration: 2s;
}

Every animation must have a name and duration property included for it to function. In addition to a start point and end point, keyframe segments can be broken up in percentages as well. The following example is a shake effect that moves the element and rotates it slightly at each keyframe segment.

@keyframes shake {  
   0% { transform: translate(1px, 1px) rotate(0deg); }  
   10% { transform: translate(-1px, -2px) rotate(-1deg); }  
   20% { transform: translate(-2px, 0px) rotate(0deg); }  
   30% { transform: translate(1px, 3px) rotate(1deg); }  
   40% { transform: translate(1px, 1px) rotate(0deg); }  
   50% { transform: translate(-3px, 2px) rotate(-1deg); }  
   60% { transform: translate(1px, 1px) rotate(0deg); }  
   70% { transform: translate(2px, 1px) rotate(-1deg); }  
   80% { transform: translate(-1px, -1px) rotate(1deg); }  
   90% { transform: translate(1px, 3px) rotate(0deg); }  
   100% { transform: translate(1px, -2px) rotate(1deg); }
}

The transform property is how to manipulate shape characteristics of the element that’s been selected. In the example above, the transform is translated, or moved on the x and y axis by just a few pixels per keyframe segment. It is also being rotated back and forth by a single degree to simulate the shaking effect. The transform property also has values for scale(x, y) to change the size, and skew(x-angle, y-angle) to define a skew effect on the x and y axis.

Floating ghosty by Helen V. Holmes.

There are several other animation properties beyond name and duration that can be used to create intricate and elaborate animations. For cases where you might want the animation to wait for a period of time before it starts, you can use animation-delay: and set it with a number value of seconds (s) or milliseconds (mil).

#element-to-fade-out {
   animation-name: fadeOut;
   animation-duration: 2s;
   animation-delay: 1.5s;
}

Another useful animation property is animation-iteration-count. This can be set with a number value that will specify the number of times that the animation will play. It can also be set with initial, which sets the iteration count to the default value, or set to inherit to inherit the count value from the parent. The iteration count can also be set to infinite to just play on a loop.

#element-to-fade-out {
   animation-name: fadeOut;
   animation-duration: 2s;
   animation-iteration-count: 5;
}

Animation-fill-mode is another useful property for customizing animations. It can be used to have the styles changed at either the beginning or the end of the animation stay set at that value after the animation is complete. By default, an element will have it’s appearance restored to whatever it was when the animation started. However, if we wanted our element to stay faded out, we could use animation-fill-mode: forwards. Other values for this property include backwards, which sets the style to the keyframe at 0% before the animation ever plays, and both, which does both the effects of forwards and backwards.

#element-to-fade-out {
   animation-name: fadeOut;
   animation-duration: 2s;
   animation-fill-mode: backwards;
}

Fancy Button by by Tobias Reich

The animation-timing-function can be used to set the speed of the animation. The values for this include:

• linear: The animation will have the same speed throughout.
• ease: The default value. The animation will start slow, speed up through the middle, and slow down again as it ends.
• ease-in: The animation will have a slow start.
• ease-out: The animation will have a slow end.
• ease-in-out: The animation will have both a slow start and a slow end.

Animation and effects can be a great way to grab the user’s attention and guide them through how to use your site. With these tools you will be able to have html elements dancing around like crazy. Or more appropriately, you’ll be able to develop a webpage that feels more interactive with visual guides and context specific animations.