CSS Animations and Transitions Guide

Transitions provide a way to smoothly change from one property value to another over a specified duration. They're ideal for simple state changes like hover effects.

Basic Transition Syntax

/* Basic syntax */
.element {
  transition: property duration timing-function delay;
}

/* Example */
.element {
  transition: background-color 0.5s ease 0s;
}

Transition Properties

.transition-color:hover {
  background-color: #e74c3c;
  transition: background-color 0.5s ease;
}

.transition-transform:hover {
  transform: scale(1.2) rotate(10deg);
  transition: transform 0.5s ease;
}

.transition-multiple:hover {
  background-color: #2ecc71;
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.5s ease;
}

.transition-delay:hover {
  background-color: #e74c3c;
  transition: background-color 0.5s ease 0.2s;
}

Timing Functions

Timing functions control the pace of the transition over its duration.

transition: transform 1s linear;

transition: transform 1s ease;

transition: transform 1s ease-in;

transition: transform 1s ease-out;

transition: transform 1s ease-in-out;

transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Transition Individual Properties

/* Individual transition properties */
.element {
  transition-property: transform, background-color;
  transition-duration: 0.5s, 1s;
  transition-timing-function: ease, linear;
  transition-delay: 0s, 0.2s;
}

Animatable Properties

Not all CSS properties can be transitioned. Here are common animatable properties:

• Background properties: background-color, background-position
• Border properties: border-color, border-width, border-radius
• Color properties: color, opacity
• Dimension properties: height, width, margin, padding
• Position properties: top, right, bottom, left
• Text properties: letter-spacing, word-spacing, line-height
• Transform properties: transform
• Box-shadow and text-shadow

CSS animations provide more control than transitions, allowing multiple states and more complex sequences through keyframes.

Basic Animation Syntax

/* Define the keyframes */
@keyframes animation-name {
  from {
    /* CSS properties at start */
  }
  to {
    /* CSS properties at end */
  }
}

/* Apply the animation */
.element {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;
}

Simple Animation Examples

.animation-bounce {
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}

.animation-rotate {
  animation: rotate 2s linear infinite;
}

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

.animation-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.animation-fade {
  animation: fade 2s ease-in-out infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.animation-shake {
  animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.animation-slide {
  animation: slide 2s ease infinite;
}

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

.animation-colors {
  animation: colors 3s linear infinite;
}

@keyframes colors {
  0% {
    background-color: #3498db;
  }
  25% {
    background-color: #2ecc71;
  }
  50% {
    background-color: #f1c40f;
  }
  75% {
    background-color: #e74c3c;
  }
  100% {
    background-color: #3498db;
  }
}

.animation-combo {
  animation: combo 3s ease infinite;
}

@keyframes combo {
  0% {
    transform: translateX(0) scale(1);
    background-color: #3498db;
  }
  25% {
    transform: translateX(50px) scale(1.1);
    background-color: #2ecc71;
  }
  50% {
    transform: translateX(0) scale(1);
    background-color: #f1c40f;
  }
  75% {
    transform: translateX(-50px) scale(1.1);
    background-color: #e74c3c;
  }
  100% {
    transform: translateX(0) scale(1);
    background-color: #3498db;
  }
}

Animation Properties

These properties give you fine-grained control over your animations:

.element {
  animation-duration: 1s;
}

.element {
  animation-timing-function: ease-in-out;
}

.element {
  animation-delay: 1s;
}

.element {
  animation-iteration-count: 3; /* or infinite */
}

.element {
  animation-direction: alternate; 
  /* normal | reverse | alternate | alternate-reverse */
}

.element {
  animation-fill-mode: forwards;
  /* none | forwards | backwards | both */
}

.element {
  animation-fill-mode: backwards;
}

.element {
  animation-play-state: running; /* or paused */
}

.element:hover {
  animation-play-state: paused;
}

Advanced Keyframe Techniques

/* Using percentages for more control */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Steps() Timing Function

.anim-steps {
  animation: steps 4s steps(4) infinite;
}

@keyframes steps {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 20px);
  }
}

Staggered Animations

.staggered-item {
  animation: bounce 0.5s infinite alternate;
}

.staggered-item:nth-child(2) {
  animation-delay: 0.1s;
}

.staggered-item:nth-child(3) {
  animation-delay: 0.2s;
}

/* And so on... */

Loading Spinner

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Content Placeholder/Skeleton Screen

.placeholder {
  width: 300px;
  height: 30px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

Notification Alert

.notification {
  padding: 10px 15px;
  background-color: #2ecc71;
  color: white;
  border-radius: 4px;
  animation: slideDown 0.5s ease forwards;
  transform: translateY(-100%);
}

@keyframes slideDown {
  to {
    transform: translateY(0);
  }
}

Attention-Grabbing Button

.btn-pulse {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  animation: buttonPulse 2s infinite;
}

@keyframes buttonPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
  }
}

Adding/Removing Animations with JavaScript

// HTML
<div class="click-animate" id="clickBox"></div>
<button onclick="animateElement()">Animate</button>

// CSS
.bounce-animation {
  animation: bounce 1s;
}

// JavaScript
function animateElement() {
  const element = document.getElementById('clickBox');
  element.classList.remove('bounce-animation');
  
  // Trigger reflow
  void element.offsetWidth;
  
  element.classList.add('bounce-animation');
}

CSS Animation Events

const element = document.getElementById('animatedElement');

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationend', () => {
  console.log('Animation ended');
});

element.addEventListener('animationiteration', () => {
  console.log('Animation iteration');
});

Accessibility Considerations

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .respects-motion-preference {
    animation: none;
    transition: none;
  }
}

Animation Performance Tips

• Stick to transform and opacity: These properties are optimized for animation and don't trigger layout recalculations.
• Use will-change: For complex animations, will-change: transform, opacity; can help browsers optimize.
• Avoid animating layout properties: Properties like width, height, margin, and padding trigger expensive layout operations.
• Be mindful of mobile devices: Complex animations can drain battery and perform poorly on less powerful devices.
• Test performance: Use browser developer tools to identify bottlenecks in your animations.

Use Transitions When:

• You need a simple change between two states (e.g., hover effects)
• You want to smooth out changes triggered by user interactions
• You don't need precise control over intermediate states
• You prefer a declarative approach with minimal code

Use Animations When:

• You need complex multi-step animations
• You want animations to play automatically without user interaction
• You need precise control over intermediate states with keyframes
• You need animations to loop or repeat in specific patterns
• You need to coordinate multiple animations with different timings

Modern browsers have excellent support for CSS transitions and animations. However, for older browsers, you might need vendor prefixes:

/* Prefixed transitions (for older browsers) */
.element {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* Prefixed animations (for older browsers) */
@-webkit-keyframes fadeIn { /* ... */ }
@-moz-keyframes fadeIn { /* ... */ }
@-o-keyframes fadeIn { /* ... */ }
@keyframes fadeIn { /* ... */ }

.element {
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

Modern development typically uses build tools like Autoprefixer to handle these prefixes automatically.