Saksham Digital Technology - Best Coding Institute in Bhopal

CSS Animation

CSS Animation:

CSS animations allow you to create more complex and dynamic animations on web pages using keyframes and CSS properties. Unlike CSS transitions, which smoothly animate property changes over a duration, CSS animations provide greater control over the animation sequence, timing, and behavior.

Here's how to use CSS animations:

Basic Syntax:

To create a CSS animation, you define a set of keyframes using the @keyframes rule and then apply those keyframes to an element using the animation property. Here's the basic syntax:

  <style>
    @keyframes animation-name {
      from {
        /* initial CSS properties */
      }

      to {
        /* final CSS properties */
      }
    }

    element {
      animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;
    }
  </style>

animation-name: The name of the keyframes animation.

duration: The duration of the animation in seconds (s) or milliseconds (ms).

timing-function: The timing function that controls the acceleration of the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), etc.).

delay (optional): The delay before the animation starts, in seconds (s) or milliseconds (ms).

iteration-count (optional): The number of times the animation should repeat (e.g., infinite for endless looping).

direction (optional): The direction of the animation (normal, reverse, alternate, alternate-reverse).

fill-mode (optional): Defines what styles are applied to the element before and after the animation (forwards, backwards, both, none).

play-state (optional): Specifies whether the animation is running or paused (running, paused).

Keyframes:

Keyframes define how an element should change over the course of an animation. You specify intermediate states between from and to. For example:

 
  <style>
    @keyframes slide-in {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(0);
      }
    }
  </style>

Applying Animations:

After defining the keyframes, you can apply the animation to an element by referencing the animation name:

  <style>
    element {
      animation: slide-in 1s ease-in-out;
    }
  </style>

In this example, the slide-in animation will move the element from the left (-100%) to its original position (0%) over 1 second with an ease-in-out timing function.

Multiple Keyframes:

You can define more than just from and to keyframes. For example, you can create animations with multiple intermediate steps:

 
  <style>
    @keyframes pulse {
      0%,100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }
    }
  </style>

This animation will make the element pulse by scaling it up and down.

Animation Events:

CSS animations can trigger JavaScript events, such as animationstart, animationend, and animationiteration, which allow you to execute JavaScript code at specific points during an animation.

Browser Compatibility:

Be aware of browser compatibility when using CSS animations. Different browsers may require vendor prefixes for certain animation properties. CSS preprocessors like SASS and LESS can help with vendor prefixing.