How to Make Cool CSS Animations in WordPress: 2026 Performance Guide

/* WRONG: Triggers constant layout reflows, causes severe lag */
.box {
  position: relative;
  left: -100%;
  animation: slide-in 1s forwards;
}
@keyframes slide-in {
  to { left: 0; }
}

/* CORRECT: GPU-accelerated, smooth, zero performance overhead */
.box {
  transform: translateX(-100%);
  animation: slide-in 1s forwards;
}
@keyframes slide-in {
  to { transform: translateX(0); }
}

/* Define keyframes for pulse animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
/* Bind hover-triggered pulse animation to button */
.cta-button:hover {
  animation: pulse 1s ease-in-out infinite;
}

add_action( 'wp_enqueue_scripts', function() {
    // Enqueue parent theme styles
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // Enqueue custom animation CSS, with version number for cache management
    wp_enqueue_style( 'custom-animations', get_stylesheet_directory_uri() . '/css/animations.css', array(), '1.0.0' );
});

/* CSS: Define scroll entrance animation */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Base animation class: add to target blocks */
.scroll-in {
  opacity: 0; /* Prevents flash of content on page load */
}
/* Active class: added when element enters viewport */
.scroll-in.is-visible {
  animation: slideIn 0.8s ease forwards;
}

<!-- JS: Trigger animation when element enters viewport -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target); // Trigger only once, no repeat animations
      }
    });
  }, {
    threshold: 0.1 // Trigger when 10% of the element is visible
  });
  // Observe all elements with the scroll-in class
  document.querySelectorAll('.scroll-in').forEach(el => {
    observer.observe(el);
  });
});
</script>

/* 1. Button hover lift + shadow enhancement: for CTAs and navigation menus */
.btn-hover {
  transition: all 0.3s ease;
}
.btn-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 2. Card hover lift + scale: for product, blog, and service cards */
.card-hover {
  transition: all 0.4s ease;
}
.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* 3. Post title hover shift: for blog and news post lists */
.post-title a {
  transition: transform 0.3s ease;
  display: inline-block;
}
.post-title a:hover {
  transform: translateX(5px);
}

/* Scroll snap container */
.scroll-snap-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
/* Each cover block inside the container */
.scroll-snap-container .wp-block-cover {
  scroll-snap-align: start;
  height: 100vh;
}

/* 1. Gradient text flow animation: for core headlines and promotional banners */
.gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientFlow 3s linear infinite;
}
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 2. Bouncing breathing animation: for sale badges, tags, and key labels */
.bounce-badge {
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 3. Infinite floating animation: for banner illustrations and decorative icons */
.float-element {
  animation: float 4s ease-in-out infinite;
}
.float-delay-1 { animation-delay: 0.5s; }
.float-delay-2 { animation-delay: 1s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Add will-change before animation starts */
.animated-element {
  will-change: transform, opacity;
  animation: slide-in 0.5s forwards;
}
/* Remove will-change after animation completes */
.animated-element.animation-done {
  will-change: auto;
}

// Listen for animation end, remove will-change
document.querySelectorAll('.animated-element').forEach(el => {
  el.addEventListener('animationend', () => {
    el.classList.add('animation-done');
  });
});

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}