CSS Animations

What is a CSS Animation?

CSS animations allow you to animate HTML elements without JavaScript. They consist of keyframes that describe the start and end states of an animation, and a set of properties that control the timing.

Basic Fade In

.fade-in{
  animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

Slide In From Left

.slide-in{
  animation: slideRight 1.5s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
@keyframes slideRight{
  from{transform:translateX(-100%);}
  to{transform:translateX(0);}
}

Infinite Rotation

.rotate{
  animation: rotate 3s linear infinite;
}
@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

Color Pulse (Adjust Speed)

.pulse{
  animation: colorPulse var(--duration) ease-in-out infinite;
}
@keyframes colorPulse{
  0%,100%{background:var(--primary);}
  50%{background:#FF6B6B;}
}