CSS Animation:

CSS animations provide more control over the animation process by allowing you to define keyframes, which are intermediate stages of an animation. Keyframes specify how the element should look at different points during the animation. The animation then smoothly transitions between these keyframes over the specified duration. The syntax for defining a CSS animation is as follows: 

element {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}


animation-name: Specifies the name of the keyframe animation. The keyframes with the same name will be used for the animation.

duration: Specifies the total time taken for one iteration of the animation, usually in seconds (s) or milliseconds (ms).

timing-function: Defines the acceleration or deceleration of the animation, similar to transitions.

delay: Optional. Defines a delay before the animation starts, specified in seconds (s) or milliseconds (ms).

iteration-count: Specifies the number of times the animation should run. Common values include infinite (default) for continuous looping or a specific number for a limited number of loops.

direction: Specifies whether the animation should play in the normal direction (normal), reverse direction (reverse), alternate direction (alternate), or alternate reverse direction (alternate-reverse) on each iteration.

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

Example 1: Slide in of html element from left side.
/* Simple animation example */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

element {
  animation: slide-in 1s ease-in-out;
}


In this example, the element will slide in from the left side (starting position at transform: translateX(-100%)) to its original position (transform: translateX(0)) over 1 second with an ease-in-out timing function.

Example 2: Bouncing ball animation of html element.
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.bouncing-ball {
  animation: bounce 2s infinite;
}


This will create a bouncing effect for an element with the class bouncing-ball.

Example 3: Rotating Spinner animation of html element.
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  animation: spin 2s linear infinite;
}


This will create a rotating spinner effect for an element with the class spinner.

Example 4: Fading In and Out Slideshow animation of html element.
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.slideshow {
  animation: fadeInOut 4s ease-in-out infinite;
}


This will create a slideshow effect where the elements fade in and out at regular intervals.

Example 5: Floating Clouds animation of html element.
@keyframes float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}
.cloud {
  animation: float 5s ease-in-out infinite alternate;
}


This will create a floating effect for elements with the class cloud.

Example 6: Typing Text animation of html element.
@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 4s steps(30) infinite alternate;
}


This will create a typewriter effect for elements with the class typewriter, making the text appear as if it is being typed.

These are just a few examples of CSS animations. CSS animations provide a powerful way to add engaging and interactive effects to your web pages, and there are countless possibilities for creative animations depending on your needs and imagination.

Key Differences between CSS Transitions and CSS Animations:

CSS Transitions are triggered when a property changes its value, and they provide a smooth transition between the old and new values. They are best suited for simple changes like hover effects, color transitions, and basic animations.

CSS Animations, on the other hand, allow you to create complex animations by defining keyframes with intermediate states. They give more control over the animation process and are suitable for advanced animations with multiple steps or complex motion.

PrevNext