CSS Animation & Transition Examples

Basic Transitions

Transitions allow you to change property values smoothly over a given duration.

Color Transition

.color-transition {
  background: #0ff;
  transition: background 0.3s ease;
}
.color-transition:hover {
  background: #ff0;
}

Scale Transition

.scale-transition {
  transition: transform 0.3s ease;
}
.scale-transition:hover {
  transform: scale(1.2);
}

Rotate Transition

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

Advanced Animations

Animations allow you to create complex, repeating animations with keyframes.

Pulse Animation

.pulse-animation {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

Bounce Animation

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

Fade Animation

.fade-animation {
  animation: fade 3s infinite;
}
@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Interactive Effects

Create engaging user interactions with CSS animations.

Portrait Reveal

.portrait-reveal {
  position: relative;
  overflow: hidden;
}
.portrait-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 0.3s ease;
}
.portrait-reveal:hover .portrait-overlay {
  opacity: 0;
}

Card Flip

.card-flip {
  perspective: 1000px;
}
.card-front, .card-back {
  transition: transform 0.6s;
  backface-visibility: hidden;
}
.card-flip:hover .card-front {
  transform: rotateY(180deg);
}
.card-flip:hover .card-back {
  transform: rotateY(0deg);
}

Performance Tips

• Use transform and opacity for smooth animations
• Avoid animating width, height, and margin
• Use will-change sparingly for elements that will animate
• Test animations on mobile devices for performance
• Consider using requestAnimationFrame for JavaScript animations