CSS Animation keyframes

In today's world, you hardly have any opportunity to be heard or noticed a second time in the virtual world, where the canvas of creativity is never complete. As a web designer/developer, you sell out designing artistically attractive and fun sites. Using CSS animation keyframes can make this possible for you. Such magical code can invigorate static websites, catching the viewer's mind in play. Welcome to this post! Here, I will tell you about CSS animation keyframes - their role and ways of working. In addition, I'll provide you with helpful examples so you can learn how to create dazzling web animation.

Understanding CSS Animations

In web design, CSS is essential in the layouts and visual styling of web pages. Despite being mostly a static design tool, CSS allows you to incorporate dynamic and interactive features in your online design through animations. You can use CSS animations to manipulate visual properties of HTML elements like color, size, position, and transparency to achieve attractive transitions and effects.

CSS Animations are based on the concept of keyframes. These are points that characterize a specific instance of an animation sequence. A particular state specifies the animation aspect of an element. The author can specify the start and end keyframes, allowing the transition from one state to another without jerks.

CSS Animation Keyframes are essential. This implies that they help select how the intermediate animation steps are ordered and what each component will look like at each stage. Essentially, in the form of a sequence of instructions, it is possible to make certain changes concerning different parts of HTML on the web page.

CSS Animation Keyframes

CSS Animation Keyframe Defined by Rule @keyframes. The essential components of a keyframe animation are as follows:

@keyframes animationName {
  0% {
    /* Styles at the beginning of the animation */
  }
  50% {
    /* Styles midway through the animation */
  }
  100% {
    /* Styles at the end of the animation */
  }
}

The animation CSS @keyframes rule. For instance, an animation-name which can be changed.

Percentages are the keyframes for the different animation phases specified. For instance, 0% represents start, 50% is half-point or middle, and 100% indicates end.

The attribute describes how one element should look at every point of the animation as its percentage blocks are presented one after another with their corresponding CSS values.

For example, let's look at one of these cases in reality.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

In this sample, we have introduced a fadeIn keyframe instance. At first, the animation is invisible with 0% opacity, whereas finally, it gets 100% opacity, making the animation's full-fledged visible. This animation gradually introduces an element into view.

Applying CSS Keyframe Animations

To add an HTML element's keyframe animation, use the animation property. Here is a simple illustration:

.my-element {
  animation: fadeIn 2s ease-in-out;
}

In the following line, the fadeIn animation is applied to an HTML element with the class 'my-element' using the 'ease-in/ease-out' timing algorithm for a 2-second animation, which creates a smooth acceleration and deceleration effect.

Sample example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Keyframes Animation</title>
  <style>
    @keyframes rotateAnimation {
      0% {
        transform: rotate(0deg);
        background-color: red;
      }
      25% {
        transform: rotate(90deg);
        background-color: blue;
      }
      50% {
        transform: rotate(180deg);
        background-color: green;
      }
      75% {
        transform: rotate(270deg);
        background-color: orange;
      }
      100% {
        transform: rotate(360deg);
        background-color: red;
      }
    }

    .animated-box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: rotateAnimation 5s linear infinite;
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

Output:

Real-World Use Cases

They are useful in various ways, ranging from small hover effects to complex page transitions. Here are a few actual instances:

Hover Effects: Create simple yet effective hover effects for buttons and links. You may also scale down the photo or change its background color to create an ambiance-like feel in interaction.
Loading Spinners: Often, animated spinners are used to show that some page or component is loading. If so, you can use keyframes to rotate a spinner element and give the user some visual indication.
Slideshow Transitions: Many slide shows and picture carousels use keyframe animation for smooth picture transitions.
Page Transitions: Moving from one part/page of a site to another using keyframe animations can lead to a smooth, eye-pleasing view.
Interactive infographics: Illustrating charts, graphs, and statistics can make information vivid and easily comprehended.

Ideal Techniques

Consider the following recommended practices to get the most out of CSS animation keyframes:

Performance: Using a tremendous quantity of assets, animations can be expensive. Use hardware acceleration to improve your animations, and watch as the animation runs seamlessly on different screens/devices.
Browser Compatibility: Verify your animation is interoperable across a spectrum of browsers. To make them more compatible, precede your keyframes with browser specifics such as -webkit-, and Moz-.
Easing Functions: Use an appropriate easing function for that effect to make it feel smooth and not abrupt. Some of the most common easings include 'linear,' 'ease-in,' 'ease-out,' and 'ease-in-out.'
Accessibility: Always take accessibility into account. Ensure that any animations are not distracting and upsetting for disabled users and provide alternative ones where needed.
Experiment and Iterate: Find what works best for your project by experimenting with various animations, then keep iterating. Play around and keep iterating because the animation in css is pretty cool.

Using Keyframes for Advanced CSS Animation

Now that you have gotten the basics of CSS animation keyframes, it's time to move forward and improve your animation abilities. In this article, I will teach you some complex ways and examples to help create more sophisticated and gorgeous web animations to enrich your web applications further. This advanced keyframe method allows developers and designers of any level, whether or not they are experienced in CSS animation development, to breathe life into their web pages.

1. Combining several animations:

The strength of CSS animations is their ability to connect several consecutive keyframe animations. Such can be fascinating as well as amazing. When you enter multiple animations, separate each animation name with a comma for the animation property.

.my-element {
  animation: fadeIn 2s ease-in-out, moveUp 1s ease-in-out 1s;
}

The "fadeIn" effect initially fades the element before "moveUp" is applied after a one-second pause. This chaining of animations allows complex motion and transformation sequences to appear.

2. Direction for Animation:

By default, animation animates to the right, but the animation direction can be configured differently. The two most common options of parameter animation-direction are "normal" (default) and "alternate." The alternative parameter causes the animation to change sense after each second and gives an impression that the image moves back and forth like the sound of ping pong.

.my-element {
  animation: moveLeft 2s linear infinite alternate;
}

The animation has a 2-second movement to the left, then it plays the reverse of the animation and has a back-and-forth move.

3. Animation Fill Modes Utilized:

The animation fill modes dictate how an element should be styled before and after the animation. Forward means that the final keyframe styles are used after the completion of the animation, while backwards means that the first keyframe styles take place before the start of the animation.

.my-element {
  animation: slide-in 2s linear forwards;
}

In this image, the element slides into position with a "forwards" fill mode until the animation ends.

4. Delays in Animation:

Keyframe animations could also be delayed using the animation-delay attribute. Animation can be synchronized on a website, or you can add a delay to build anticipation.

.my-element {
  animation: rotate 2s ease-in-out 1s;
}

The "rotate" animation starts working one second after the element emerges for the first time, providing an illusion of delaying spinning.

5. Customizable Timing Options:

The use of the easing-in and out timing function is common. However, you can create your timing algorithms using the cubic-bezier function to determine the timing of each keyframe. With this, one can adjust each animation step's speed and speed-up parameters.

@keyframes customTiming {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.my-element {
  animation: customTiming 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

We have created a unique way of using the cubic bezier function to create an animation curve. With this curve, you can trace the rate of change within the animation and recognize its visual appearance.

6. 3D transformation:

CSS animation allows for more than just 2D transformation. Use 3D transformations to give your animations depth and reality. For example, you can rotate a layer along its x, your z-axis to produce appealing 3D effects.

@keyframes rotate3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.my-element {
  animation: rotate3D 4s linear infinite;
}

The "rotate3D" animation uses both rotateX and rotateY to create a smooth 3D rotation effect on two axes.

Example using all the above concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<title>CSS Animation Examples</title>
  <style>
    /* Keyframe Animation for Fading In */
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* Keyframe Animation for Moving Up */
    @keyframes moveUp {
      0% {
       
transform: translateY(0);
      }
      100% {
       
transform: translateY(-50px);
      }
    }

    /* Keyframe Animation for 3D Rotation */
    @keyframes rotate3D {
      0% {
       
transform: rotateX(0deg) rotateY(0deg);
      }
      100% {
       
transform: rotateX(360deg) rotateY(360deg);
      }
    }

    /* Keyframe Animation with Custom Timing */
    @keyframes customTiming {
      0% {
       
transform: scaleX(1);
       
background-color: red;
      }
      100% {
       
transform: scaleX(0);
       
background-color: green;
      }
    }

    /* Applying Multiple Animations */
    .my-element {
      width: 100px;
      height: 100px;
     
background-color: red;
      animation: fadeIn 2s ease-in-out, moveUp 1s ease-in-out 1s, rotate3D 4s linear infinite, customTiming 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    }

    /* Applying Animation Direction and Fill Modes */
   
.reversed-element {
      width: 100px;
      height: 100px;
     
background-color: blue;
      animation: moveUp 2s linear infinite alternate, customTiming 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 1s alternate;
    }
  </style>
</head>
<body>
  <div class="my-element">Combined Animations</div>
  <div class="reversed-element">Reversed Animation</div>
</body>
</html>

Output:

Conclusion

With advanced CSS animation keyframes, you can create wonderful web animations with unlimited possibilities. With these capabilities, you can improve your web design and development skills, such as chaining animations, controlling animation direction, using fill modes, applying delays, and creating custom timing functions.

Ensure that your investigation of these advanced techniques focuses on finding this equilibrium between originality and usability. The user experience should be focused on simple animations. You must test on multiple platforms to ensure users have smooth, consistent interactions while using different browsers and other devices.

These highly advanced CSS animation keyframe techniques will enable you to design beautiful and engaging web pages that will stick in the minds of your users. Therefore, let your imagination fly, experiment with those techniques, and develop engaging web pages.

Next TopicCSS Blur

← prev next →