CSS Animations: A Beginner’s Guide

Introduction

Adding animations to your website can turn an ordinary experience into something interactive and delightful. Thankfully, CSS animations make it straightforward to create movement and transitions, all without JavaScript. This beginner’s guide will walk you through the essentials of CSS animations, offering code examples and best practices for web development enthusiasts on fulldev.pl.

What Are CSS Animations?

CSS animations let you smoothly change CSS property values over time. You can animate elements like buttons, backgrounds, and text to enhance user engagement and highlight important features.

Key CSS Animation Concepts

• Transitions: Used for simple state changes (like hover effects).
• Animations: Allow more complex, multi-step changes using @keyframes.

1. CSS Transitions

Transitions provide an easy way to animate property changes, often triggered by pseudo-classes like :hover.

.btn {
  background: #007bfa;
  color: #fff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 4px;
  transition: background 0.3s;
}
.btn:hover {
  background: #005bb5;
}

With transition: background 0.3s;, the background color fades smoothly on hover.

2. CSS Animations with @keyframes

For more complex effects, use @keyframes to define the animation steps.

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.box {
  animation: slideIn 0.8s ease-out;
}

Here, the .box element will slide in from the left and fade in.

Common Animation Properties

• animation-name: Name of the @keyframes (e.g., slideIn).
• animation-duration: How long the animation lasts (1s, 500ms).
• animation-timing-function: Controls the acceleration (e.g., ease, linear).
• animation-delay: Wait before the animation starts.
• animation-iteration-count: Number of times the animation runs (infinite for looping).
• animation-direction: Run animation normal, reverse, or alternate.

Practical Examples

Bounce Button Animation

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.animated-btn {
  animation: bounce 1s infinite;
}

Fade In Text

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.text {
  animation: fadeIn 2s;
}

Tips for Great CSS Animations

• Keep animations subtle and purposeful—avoid distracting your users.
• Test performance on mobile devices for smoothness.
• Combine transform and opacity for best performance.
• Use animation-play-state to pause/resume on hover or focus.

Accessibility Considerations

• Minimize motion for users with motion sensitivity by respecting the prefers-reduced-motion media query:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Conclusion

CSS animations add polish and engagement to your web projects without the overhead of JavaScript. Start experimenting with transitions and keyframes to bring your interface to life—and always keep usability and accessibility in mind for a seamless user experience!