animation

CSS animations allow you to create complex, engaging animations without the need for JavaScript. By defining keyframes and applying animation properties to elements, you can control how elements transition over time. Here’s a comprehensive guide to using animations in CSS.

Understanding CSS Animations

CSS animations enable the gradual change of CSS properties over time. They consist of two main components:

• @keyframes Rule: Defines the animation’s behavior by specifying keyframes (specific points in the animation timeline).
• Animation Properties: Applied to the HTML elements to control the animation’s execution.

Basic Syntax

Defining @keyframes

The @keyframes rule specifies the changes an element will undergo during the animation. You can define keyframes using percentages or the keywords from and to.

@keyframes animationName {
  from {
    /* Initial styles */
  }
  to {
    /* Final styles */
  }
}

/* Or using percentages */

@keyframes animationName {
  0% {
    /* Initial styles */
  }
  50% {
    /* Midpoint styles */
  }
  100% {
    /* Final styles */
  }
}

Applying Animation to an Element

Use the animation property (or its sub-properties) to apply the animation to an element.

.element {
  animation-name: animationName;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

Alternatively, you can use the shorthand animation property:

.element {
  animation: animationName 2s ease-in-out 0s infinite alternate forwards;
}

Animation Properties Explained

• animation-name: Specifies the name of the @keyframes animation.
• animation-duration: Defines how long the animation runs (e.g., 2s for two seconds).
• animation-timing-function: Controls the animation’s speed curve (e.g., linear, ease, ease-in, ease-out, ease-in-out, or a custom cubic-bezier).
• animation-delay: Sets a delay before the animation starts.
• animation-iteration-count: Determines how many times the animation should repeat (infinite for endless loops).
• animation-direction: Specifies whether the animation should play forward, reverse, or alternate between the two (normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: Dictates how the element styles are applied before and after the animation (none, forwards, backwards, both).
• animation-play-state: Controls whether the animation is running or paused (running, paused).

Steps to Create an Animation:

Define the desired styles for each keyframe using CSS properties.

Define Keyframes:

Use the @keyframes rule to create a named keyframe set.

Specify keyframes at different percentages (0%, 25%, 50%, 75%, 100%) within the set.

@keyframes myAnimation {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

Apply the Animation to an Element:

• Select the element you want to animate using a CSS selector.
• Set the animation property to reference the keyframe set and define animation properties.

.animated-element {
    animation: myAnimation 2s ease-in-out infinite;
}

Example: Simple Fade-In Animation

Let’s create a simple fade-in effect where an element transitions from fully transparent to fully opaque.

HTML

<div class="fade-in-box">
  Welcome to CSS Animations!
</div>

CSS

.fade-in-box {
  opacity: 0; /* Start fully transparent */
  animation: fadeIn 3s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1; /* End fully opaque */
  }
}

Explanation:

• The .fade-in-box element starts with opacity: 0.
• The fadeIn animation changes the opacity to 1 over 3 seconds with an ease-in timing function.
• The forwards fill mode ensures the element stays at opacity: 1 after the animation completes.

Example: Moving an Element

Create an animation that moves an element from left to right.

HTML

<div class="move-box">
  I move from left to right!
</div>

CSS

.move-box {
  position: relative;
  animation: moveRight 4s linear infinite;
}

@keyframes moveRight {
  0% {
    left: 0;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0;
  }
}

Explanation:

• The .move-box element is positioned relative to allow movement.
• The moveRight animation moves the element 200px to the right at the 50% mark and then back to the starting position.
• The animation runs for 4 seconds, uses a linear timing function, and repeats infinitely.

Combining Multiple Animations

You can apply multiple animations to a single element by separating them with commas.

HTML

<div class="complex-animation">
  I rotate and change color!
</div>

CSS

.complex-animation {
  animation: rotate 5s linear infinite, changeColor 5s ease-in-out infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes changeColor {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

Explanation:

• The .complex-animation element simultaneously rotates and changes its background color.
• Both animations run for 5 seconds and repeat infinitely.
• The rotate animation spins the element 360 degrees.
• The changeColor animation transitions the background color from red to blue and back to red.

Best Practices

• Performance Considerations: Use animations sparingly to avoid overwhelming users. Prefer animating properties like transform and opacity for better performance.
• Accessibility: Provide options to reduce motion for users who prefer minimal animations (e.g., using the prefers-reduced-motion media query).

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

Cross-Browser Compatibility: Modern browsers support CSS animations, but consider adding vendor prefixes for broader compatibility if supporting older browsers.

.element {
  -webkit-animation: animationName 2s ease-in-out;
  -moz-animation: animationName 2s ease-in-out;
  animation: animationName 2s ease-in-out;
}

@-webkit-keyframes animationName {
  /* keyframes */
}

@-moz-keyframes animationName {
  /* keyframes */
}

@keyframes animationName {
  /* keyframes */
}

Tool

https://animate.style