CSS Animation

Introduction

CSS animations offer a powerful way to bring your web pages to life by adding dynamic and engaging effects.

By gradually changing the CSS properties of elements over time, you can create visually appealing and interactive experiences.

This guide explores the fundamentals of CSS animations, providing essential knowledge and tools to enhance your web projects.

Key Components of Animations

• Animation name: Unique identifier for the animation.
• Animation duration: Total time the animation takes to complete.
• Animation timing function: Defines the speed curve, such as linear or ease-in-out.
• Animation delay: Wait time before the animation starts.
• Animation iteration count: Number of times the animation repeats.
• Animation direction: Direction of animation play, such as normal, reverse, or alternate.
• Animation fill mode: Styles applied before and after the animation.

Creating Animations with @keyframes

The @keyframes rule defines the animation sequence. Set the percentage marks and apply style changes for each keyframe.

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

  100% {
    opacity: 1;
  }
}

Applying Animations to Elements

Use the animation shorthand or its individual properties to attach animations to HTML elements.

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

Interactive Examples

• Fading element
• Bouncing ball
• Bouncing text with rotation
• Progress bar
• Loading spinner

Fading Element

Use Case: Reveal hidden content or subtle transitions.

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 600ms ease both;
}

Bouncing Ball

Use Case: Simulate physical motion or draw attention.

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-40px);
  }
}

.ball {
  animation: bounce 700ms ease-in-out infinite;
}

Bouncing Text with Rotation

@keyframes bounceRotate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-1rem) rotate(8deg);
  }
}

.animated-text {
  animation: bounceRotate 900ms ease-in-out infinite;
}

Progress Bar

@keyframes progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.progress-bar {
  transform-origin: left;
  animation: progress 2s ease forwards;
}

Loading Spinner

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

.spinner {
  inline-size: 2rem;
  block-size: 2rem;
  border: 4px solid #ddd;
  border-top-color: #2f9e44;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

Advanced Techniques

CSS animations can be combined with transforms, 3D space, and JavaScript to create more interactive designs.

3D Transformations and Animations

By combining 3D transforms with animations, you can create immersive and visually striking effects.

Example: 3D Card Flip

This setup enables a smooth card flipping effect when hovered, simulating a 3D transformation using perspective and preserve-3d.

.card-scene {
  perspective: 800px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 400ms ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-face {
  backface-visibility: hidden;
}

Keyframe Animations with JavaScript

JavaScript can be used to dynamically control CSS animations, allowing for more interactive designs.

Example: Dynamically Triggering Animations

This method allows for animations that are triggered by user interactions, adding an extra layer of interactivity to your site.

const button = document.querySelector('.animation-button');
const box = document.querySelector('.animated-box');

button.addEventListener('click', () => {
  box.classList.remove('is-animating');

  requestAnimationFrame(() => {
    box.classList.add('is-animating');
  });
});

Conclusion

CSS animations allow developers to create smooth, interactive visual effects without using JavaScript.

Mastering animations opens up a wide range of creative possibilities in user interface design.