Skip to main content

CSS Animations

CSS Animations

CSS Animations allow developers to create complex, smooth animations directly in CSS, without relying on JavaScript or additional libraries. With animations, you can bring web pages to life by animating the properties of HTML elements over time using keyframes and animation properties.

01. What Are CSS Animations?

CSS Animations enable transitions between multiple states of an element by defining intermediate steps with @keyframes. They provide greater control over animations compared to CSS transitions, making it possible to animate properties in sequences.

02. CSS Animation Syntax

To create animations, you need two main components:

  • @keyframes: Defines the animation's keyframes and specifies how the element's styles should change at different points during the animation.
  • Animation properties: Applied to the element to specify animation behavior.

Example of @keyframes:


@keyframes example {
  0% {
    background-color: red;
    left: 0;
  }
  50% {
    background-color: yellow;
    left: 50%;
  }
  100% {
    background-color: green;
    left: 100%;
  }
}

03. Animation Properties

CSS provides several properties to control animations:

  • animation-name: Specifies the name of the @keyframes to use.
  • animation-duration: Sets the length of time for the animation to complete (e.g., 2s, 500ms).
  • animation-timing-function: Defines the speed curve of the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out).
  • animation-delay: Specifies a delay before the animation starts.
  • animation-iteration-count: Specifies how many times the animation will run (e.g., infinite, 1, 3).
  • animation-direction: Sets the direction of the animation (e.g., normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Defines how an element should be styled before and after the animation executes (e.g., none, forwards, backwards, both).

04. Applying CSS Animations

Here is an example of applying CSS animations to a div element:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animations Example</title>
  <style>
    .animated-box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: slide-and-color;
      animation-duration: 4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }

    @keyframes slide-and-color {
      0% {
        background-color: red;
        left: 0;
      }
      50% {
        background-color: yellow;
        left: 50%;
      }
      100% {
        background-color: green;
        left: 0;
      }
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

05. Animation Timing Functions

The animation-timing-function determines the pace of the animation. Common values include:

  • ease: Starts slow, speeds up, then slows down.
  • linear: Maintains a consistent speed.
  • ease-in: Starts slowly and accelerates.
  • ease-out: Starts quickly and decelerates.
  • ease-in-out: Combines ease-in and ease-out.

06. Combining Multiple Animations

Multiple animations can be applied to the same element by separating them with commas:


.animated-element {
  animation: slide 3s ease, fade 2s ease-out;
}

07. Browser Compatibility

CSS Animations are widely supported across modern browsers. Here is a compatibility table:

Property Chrome Firefox Safari Edge Opera
animation 43+ 16+ 9.1+ 12+ 30+
@keyframes 43+ 16+ 9.1+ 12+ 30+

08. Conclusion

CSS Animations offer a robust and efficient way to create dynamic effects in web applications. By mastering animation properties and combining keyframes, developers can design interactive and visually stunning user interfaces. Start experimenting with CSS animations to enhance your web projects!

Comments

Post a Comment