CSS & Styling

Wat zijn CSS animations en keyframes?

Animations laten elementen complexer bewegen met meerdere stadia.

Home/Categorieën/CSS & Styling/Wat zijn CSS animations en keyframes?

Keyframes

@keyframes definieert animatie stadia. Van (0%) naar (100%) of meerdere percentages.

Animation properties

animation-name: keyframe naam animation-duration: lengte animation-iteration-count: how many times animation-direction: normal, reverse, alternate animation-fill-mode: forwards (blijf in final state)

Code Voorbeelden

CSSSpinning animation
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 2s linear infinite;
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.bouncy {
  animation: bounce 0.6s ease-in-out infinite;
}

Relevante trefwoorden

animationkeyframes@keyframes

Gerelateerde Vragen

← Terug naar CSS & StylingAlle categorieën →