CSS keyframes-generator

De fyra förinställningarna

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); }
}

Elementet tonar in medan det glider uppåt underifrån.

Pulse

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

En mjuk pulserande effekt, bra för notiser och badges.

Spin

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

Ett helt varv, användbart för spinners och ikoner.

Bounce

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

Elementet hoppar uppåt och tillbaka.

Varför transform och opacity?

Webbläsare kompositerar transform och opacity på GPU:n utan att räkna om layout eller måla om, så att animera dem förblir mjukt. Förinställningarna undviker medvetet egenskaper som utlöser layoutberäkning.

animation-förkortningen

animation: fade-slide 0.6s ease both; läses: animationen fade-slide, 0.6 sekunder lång, med den förvalda ease-kurvan. Fyllnadsläget both applicerar starttillståndet före animationens början och behåller sluttillståndet efter avslut, vilket förhindrar att elementet blinkar till innan eller studsar tillbaka efter rörelsen.

Namnkonventioner

• Använd kebab-case, i enlighet med CSS-konventionen.
• Beskriv rörelsen, inte elementet: fade-in-up är bättre än alert-appear.
• Undvik namn som kan kollidera med tredjepartsbibliotek.

Webbläsarstöd

@keyframes är universellt och stöds av alla webbläsare sedan IE 10.