Unlocking the Power of CSS Keyframes

CSS animations are a game-changer for web developers, enabling us to create engaging and interactive websites. Keyframes play a significant role in CSS animations, allowing for the creation of complex, multi-stage animations with precise control over each step. In this article we will dig into the world of keyframes, discuss their benefits, and present some inspiring examples to fuel your next project.

 

What is CSS Keyframes?

Keyframes are used in CSS to create animations, they define the various stages of the animation. They give you control over the styling of an element at specific points during the animation, allowing for smooth transitions between styles. Think of keyframes as a way to tell the browser: “Hey, I want this element to change its style from this point (A) to that point (B) over a certain period of time.” You can also add multiple points, which creates the possibility to make more complex animations.

To create a keyframe animation, you’ll define a set of keyframes using the @keyframes rule, and then apply that animation to an element using the animation property.

 

Benefits of Using Keyframes

• Fine-grained control: Keyframes provide precise control over the timing and styles applied at each stage of an animation, enabling you to create complex and realistic animations.
• Reusability: You can apply the same set of keyframes to multiple elements or use them in combination with other keyframe animations, making your CSS code more modular and maintainable.
• Browser compatibility: Keyframe animations are widely supported across modern browsers, making them a reliable choice for creating animations on the web as indicated in Figure 1 below.
• Performance: CSS animations, including keyframes are GPU-accelerated resulting in smoother animations and reduced CPU usage compared to JavaScript-based animations.

Figure 1 - keyframes browser compatibility

 

What We All Really Came for: Examples

⦾ Loading Spinner

A classic use case for keyframes is creating a simple loading spinner. By animating the rotation of a spinner element, you can create a smooth, infinite spinning effect. Perfect for those slow API calls 😆

@keyframes spinner {  
  0% {  
    transform: rotate(0deg);  
  }  
  100% {  
    transform: rotate(360deg);  
  }  
}  

.spinner {  
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  border-top-color: #F6A23C;
  animation: spinner 2s linear infinite;
}

 

⦾ Typewriter Effect

With keyframes, you can create a typewriter effect that reveals text one character at a time, simulating the look of a typewriter. By animating the width of a hidden text container, you can create a captivating effect for your website’s headings or call-to-action text.

@keyframes typewriter {  
  0% {  
    width: 0;  
  }  
  100% {  
    width: 100%;  
  }  
} 

@keyframes blink-cursor {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #A68DBA;
  }
} 

.typewriter-text {  
  overflow: hidden;  
  border-right: 0.15em solid;  
  white-space: nowrap;  
  animation: typewriter 3s steps(30, end), blink-cursor 0.5s step-end infinite; 
}

Let's break down the animation here since it looks longer than usual. There is actually two separate animations that run simultaneously on the same element 😲

First animation: typewriter 3s steps(30, end)

• typewriter: the keyframes animation that will be applied to the element for the typing effect
• 3s: duration of the typewriter animation
• steps(30, end): timing function that controls the pacing of the animation. In this case, the animation is divided into 30 steps, with the last step at the very end.

Second animation: blink-cursor 0.5s step-end infinite

• blink-cursor: the keyframes animation that will be applied to the element for the blinking cursor effect
• 0.5s: duration of the blink-cursor animation
• step-end: timing function that causes an immediate jump to the final state of the animation. It is effectively the same as steps(1, end)—the animation has only one step, and that step is at the very end of the animation
• infinite: iteration count, which specifies how many times the animation should run. In this case, the animation will run infinitely.

 

⦾ Bouncing Ball

Keyframes can also be used to create fun animations, like a bouncing ball. By combining translations and scaling, you can create a realistic bouncing effect that adds a playful touch to your website.

@keyframes bounce {  
  0%, 100% {  
    transform: translateY(0) scaleY(1);  
  }  
  50% {  
    transform: translateY(-50px) scaleY(1.2);  
  }  
}  

.bouncing-ball {  
  animation: bounce 1s ease-in-out infinite;  
}

Let's breakdown these keyframes ... I promise we are almost done!

• 0%, 100%: These are the keyframes of the animation. The % values represent the progress of the animation. In this case, the animation starts and ends at 0% and 100%, respectively.
• transform: translateY(0) scaleY(1): This is the CSS transform property that specifies how the element should be transformed at the keyframes. In this case, the element is translated vertically by 0 pixels and scaled in the Y direction by 1 (i.e., no scaling).
• 50%: This is the midpoint of the animation
• transform: translateY(-50px) scaleY(1.2): This is the CSS transform property at the midpoint of the animation. In this case, the element is translated vertically by -50 pixels (i.e., upwards) and scaled in the Y direction by 1.2 (i.e., slightly larger than its original size).
* Adding the 0.2 to the scaling really gives it that bouncing effect otherwise it would just be moving up and down... optical illusions can be cool :-)

 
Voila, there you have it!

CSS keyframes are like your secret weapon to make super cool animations for your website. Once you get the hang of their advantages and play around with these examples, you'll see how keyframes can level up your site's user experience. So, don't hold back—dive into the world of keyframes and watch your web designs come alive! 👾