Simple CSS Animation Snippets

← Back to Tools List

CSS Animation Snippets

A collection of simple, reusable CSS animation snippets for common UI effects. Click the copy buttons to grab the code.

Hover Effects

Grow on Hover

.grow-hover {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  /* Add other button styles */
}

.grow-hover:hover {
  transform: scale(1.1); /* Grow by 10% */
}

Shrink on Hover

.shrink-hover {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
  /* Add other button styles */
}

.shrink-hover:hover {
  transform: scale(0.9); /* Shrink by 10% */
}

Fade Opacity on Hover

Hover Me
.fade-hover {
  transition: opacity 0.3s ease-in-out;
  /* Add other element styles */
}

.fade-hover:hover {
  opacity: 0.7; /* Fade to 70% opacity */
}

Color Change on Hover

.color-hover {
  background-color: #007bff; /* Initial color */
  color: white;
  transition: background-color 0.3s ease;
  /* Add other button styles like padding, border-radius */
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
}

.color-hover:hover {
  background-color: #0056b3; /* Darker color on hover */
}

Slide Up on Hover

.slide-up-hover {
  display: inline-block;
  transition: transform 0.2s ease-out;
  /* Add other button styles */
}

.slide-up-hover:hover {
  transform: translateY(-5px); /* Move up by 5px */
}

Add Shadow on Hover

Hover Me
.shadow-hover {
  transition: box-shadow 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Initial shadow */
  /* Add other element styles */
  padding: 1rem;
  border-radius: 4px;
  background-color: white;
}
body.dark-mode .shadow-hover {
    background-color: var(--preview-bg-dark);
}

.shadow-hover:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Larger shadow on hover */
}

Loading Indicators

Simple Spinner

.spinner-loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 123, 255, 0.2); /* Light border */
  border-top-color: #007bff; /* Accent color for moving part */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* Dark mode adjustments (Optional) */
body.dark-mode .spinner-loader {
   border-color: rgba(102, 191, 255, 0.2);
   border-top-color: #66bfff;
}

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

Pulsing Dot

.pulsing-dot {
  width: 15px;
  height: 15px;
  background-color: #007bff; /* Accent color */
  border-radius: 50%;
  animation: pulse-loader 1.5s ease-in-out infinite;
}
/* Dark mode adjustments (Optional) */
body.dark-mode .pulsing-dot {
   background-color: #66bfff;
}

@keyframes pulse-loader {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.5;
  }
}

Bouncing Dots

<div class="bouncing-dots-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
.bouncing-dots-loader {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Align dots to bottom */
  height: 40px; /* Container height */
}

.bouncing-dots-loader div {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background-color: #007bff; /* Accent color */
  border-radius: 50%;
  animation: bounce-dots 1.4s infinite ease-in-out both;
}
/* Dark mode adjustments (Optional) */
body.dark-mode .bouncing-dots-loader div {
   background-color: #66bfff;
}

.bouncing-dots-loader div:nth-child(1) { animation-delay: -0.32s; }
.bouncing-dots-loader div:nth-child(2) { animation-delay: -0.16s; }
.bouncing-dots-loader div:nth-child(3) { animation-delay: 0s; }

@keyframes bounce-dots {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

Entrance Effects

Animation runs automatically in preview. Apply animation class (e.g., `.fade-in-animate`) via JS when needed.

Fade In

Fade In
<div class="fade-in-element">Your Content</div>
.fade-in-element {
  opacity: 0; /* Start hidden */
}

/* Add this class to trigger the animation */
.fade-in-animate {
  animation: fadeIn 0.8s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

Slide In From Left

Slide Left
<div class="slide-in-left-element">Content</div>
.slide-in-left-element {
  opacity: 0; /* Start hidden and off-screen */
  transform: translateX(-50px);
}

/* Add this class to trigger the animation */
.slide-in-left-animate {
  animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Slide In From Right

Slide Right
<div class="slide-in-right-element">Content</div>
.slide-in-right-element {
  opacity: 0; /* Start hidden and off-screen */
  transform: translateX(50px);
}

/* Add this class to trigger the animation */
.slide-in-right-animate {
  animation: slideInRight 0.6s ease-out forwards;
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Zoom In Entrance

Zoom In
<div class="zoom-in-element">Content</div>
.zoom-in-element {
  opacity: 0;
  transform: scale(0.8); /* Start slightly smaller */
}

/* Add this class to trigger the animation */
.zoom-in-animate {
  animation: zoomIn 0.5s ease-out forwards;
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

Attention Seekers

Shake Animation

Apply animation class via JS on event.

/* Add 'shake-animation' class to trigger */
.shake-animation {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

Pulse Animation (Attention)

Pulse

Add class to apply constantly or trigger.

/* Apply 'pulse-attention-animate' class */
.pulse-attention-animate {
  animation: pulse-attention 1.5s infinite ease-in-out;
}

@keyframes pulse-attention {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08); /* Slightly larger */
  }
}

Wobble Animation

Apply animation class via JS on event.

/* Add 'wobble-animation' class to trigger */
.wobble-animation {
  animation: wobble 0.8s ease-in-out;
}

@keyframes wobble {
  0%, 100% { transform: translateX(0%); }
  15% { transform: translateX(-8%) rotate(-4deg); }
  30% { transform: translateX(6%) rotate(3deg); }
  45% { transform: translateX(-5%) rotate(-2deg); }
  60% { transform: translateX(3%) rotate(1deg); }
  75% { transform: translateX(-2%) rotate(-1deg); }
}

Tada Animation

Apply animation class via JS on event.

/* Add 'tada-animation' class to trigger */
.tada-animation {
  animation: tada 1s ease;
}

@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}

Background Effects

Skeleton Loading Pulse

<div class="skeleton-loading"></div>
<!-- Repeat for multiple placeholder lines -->
/* Apply to placeholder elements */
.skeleton-loading {
  background-color: #e0e0e0; /* Placeholder color */
  animation: pulse-bg 1.5s infinite ease-in-out;
  border-radius: 4px; /* Optional: round corners */
  /* Define width/height for the placeholder */
  width: 100%;
  height: 20px; /* Example height */
  margin-bottom: 10px; /* Example spacing */
}

/* Adjust background colors for dark mode if needed */
body.dark-mode .skeleton-loading {
   background-color: #424242;
}

@keyframes pulse-bg {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

Animated Gradient Background

Gradient BG

Applies constantly.

.gradient-bg-animate {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  /* Add other styles: padding, color, border-radius etc. */
  padding: 1rem 1.5rem;
  color: white;
  border-radius: 4px;
}

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