CSS keyframes-generator

De vier voorinstellingen

Fade slide

.animated {
  animation: fade-slide 0.6s ease both;
}

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

Het element verschijnt terwijl het van onderen omhoog glijdt.

Pulse

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

Een zacht ademend effect, goed voor meldingspunten en badges.

Spin

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

Een volledige draaiing, nuttig voor loaders en pictogrammen.

Bounce

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

Het element springt omhoog en komt terug.

Waarom transform en opacity?

Browsers compositen transform en opacity op de GPU zonder layout of painting opnieuw te berekenen, dus animeren blijft vloeiend. De voorinstellingen vermijden doelbewust eigenschappen die layoutberekening triggeren.

De verkorte animation-notatie

animation: fade-slide 0.6s ease both; leest als: de animatie genaamd fade-slide, 0.6 seconde lang, met de standaard ease-overgang. De vulmodus both past de begintoestand toe vóór de animatie start en houdt de eindtoestand vast nadat deze klaar is, zodat het element niet flikkert vóór of abrupt terugspringt ná de beweging.

Naamgevingsconventies

• Gebruik kebab-case, volgens de CSS-conventie.
• Beschrijf de beweging, niet het element: fade-in-up is beter dan alert-appear.
• Vermijd namen die kunnen botsen met bibliotheken van derden.

Browserondersteuning

@keyframes is universeel, ondersteund door elke browser sinds IE 10.