CSS Keyframes: From Static to Dynamic Designs

Web designers often seek tools that can bring static elements to life, and CSS keyframes are a great ally for this task. Keyframes enable us to animate elements over a certain duration, providing our designs with a dynamic feel. Below, we’ll cover the basics of using keyframes, from defining animations to applying them to our elements.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month!

DOWNLOAD NOW

Understanding the Structure of CSS Keyframes

At the core of every CSS animation are keyframes, which define the stages of an animation sequence. Keyframes are declared using the @keyframes rule, followed by an animation name of your choice. The name we use in the example below, changeBackground, is arbitrary – you could name it anything that suits your needs.

Here’s an illustration:

/* Keyframe declaration */
@keyframes changeBackground {
  0%   { background: #ff0000; } /* Red at the start */
  50%  { background: #00ff00; } /* Green in the middle */
  100% { background: #0000ff; } /* Blue at the end */
}

The changeBackground keyframe dictates how the background color of an element will transition during the animation. At the start of the animation (0%), the background is red. At the midway point (50%), the background changes to green. Finally, at the end of the animation (100%), the background transitions to blue.

Applying CSS Keyframes to an Element

Now, let’s apply our keyframes to an HTML element using the animation shorthand property:

/* Applying keyframe to an element */
.myElement {
  animation: changeBackground 2s ease-in-out 1s infinite alternate;
}

In this case, we’ve applied the changeBackground keyframe to an element with the .myElement class. The animation alters the background color of this element over a defined period, according to the stages we set in the keyframe.

Dissecting the Animation Shorthand

The animation shorthand property encapsulates several animation-related properties:

/* The animation shorthand */
animation: changeBackground 2s ease-in-out 1s infinite alternate;

• changeBackground: The keyframe we defined earlier.
• 2s: One cycle of the animation will last 2 seconds.
• ease-in-out: The pace of the animation, starting slow, becoming fast in the middle, and then ending slow.
• 1s: The animation will start after a delay of 1 second.
• infinite: The animation will repeat indefinitely.
• alternate: The animation will alternate directions each cycle.

These are the most commonly used properties but remember that you can also specify animation-fill-mode, animation-play-state, and more. Each property can also be specified separately if you want more control over the animation.

Manipulating Animation Timeline with Percentages and Keywords

Keyframe animations allow changes in style to be dictated using either percentages or the from and to keywords. from represents the start (0%), and to represents the end (100%) of the animation:

/* Keyframe declaration using keywords */
@keyframes fadeInOut {
from { opacity: 0; } /* The element is fully transparent at the start */
to { opacity: 1; } /* The element is fully visible at the end */
}

.myElement {
  animation: fadeInOut 3s ease-in-out 1s infinite alternate;
}

In the fadeInOut keyframe above, we’re changing the element’s opacity. It starts with being fully transparent (opacity: 0) and transitions to being fully visible (opacity: 1). The from and to keywords can be used interchangeably with 0% and 100%, respectively.

So, when this animation is applied to .myElement, the element will gradually fade in over a 3-second duration, from being completely transparent to fully visible. After a 1-second delay, the process will reverse, causing the element to fade out, creating an ongoing cycle of fading in and out due to the infinite and alternate keywords.

Bringing It All Together

Let’s look at a slightly more detailed example:

/* Keyframe declaration */
@keyframes spin {
  0% { transform: rotate(0deg); } /* Element starts at its original position */
  50% { transform: rotate(180deg); } /* Rotates 180 degrees halfway through the animation */
  100% { transform: rotate(360deg); } /* Completes a full rotation at the end */
}

.box {
  width: 100px;
  height: 100px;
  background: #FF4B59; /* Specific shade of red */
  animation: spin 2s linear infinite; /* Applies the spin animation */
}

And here’s our HTML element:

<div class="box"></div>

In the above example, we define an animation named spin that rotates an element. We apply this animation to a <div> element with the class .box. This <div> is a square with a specific shade of red. It will continue to rotate, creating a loop because of the infinite keyword. The transform property with the rotate() function is used to alter the position of the element, providing the rotation effect. The linear keyword ensures that the rotation speed is consistent throughout the animation.

See the Pen CSS Text Embossing Effect by 1stWebDesigner (@firstwebdesigner) on CodePen.0

Conclusion

CSS keyframes form the foundation of most CSS animations. Naturally, there’s more to learn and experiment with beyond the aspects we covered. For instance, consider exploring the steps() function in CSS animations, which allows you to break your animation into segments, giving you “frame by frame” control.

When it comes to interactive animations, JavaScript can be combined with CSS keyframes to trigger animations based on user actions like clicks or scrolls. Meanwhile, SVG animations offer more complex graphical animations beyond standard HTML elements, allowing you to animate individual parts of an SVG image for intricate visual effects.

As your understanding of CSS keyframes deepens, you’ll be able to leverage them more effectively to improve your designs and their user experience. Consider using animations for user guidance, interaction feedback, or simply to elevate your designs.

However, remember that animations can be resource-intensive. Strive for a balance between the aesthetic appeal of animations and your website’s performance. Techniques such as reducing the number of animated properties or minimizing the number of keyframes can help you achieve this balance.