Effects & Animation

Keyframe Animations

For animations that run on their own (loading spinners, pulsing dots, entrance effects), define keyframes.

Syntax:

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fade-up 0.6s ease-out both;
}

A loading spinner

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

.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #ddd;
  border-top-color: #1c6fa8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Property	Example
`animation-duration`	`2s`
`animation-iteration-count`	`3`, `infinite`
`animation-direction`	`alternate`
`animation-delay`	`0.5s`
`animation-fill-mode`	`both` keeps the start and end styles