CSS — Animations

Genel Bakış

CSS animasyonları keyframes ile hareket oluşturur.

Öğreneceklerin

• @keyframes
• süre
• timing
• tekrar

Sözdizimi

@keyframes fade{ from{opacity:0} to{opacity:1} }

Örnek

@keyframes pop{
  from{ transform:scale(.96); opacity:.2; }
  to{ transform:scale(1); opacity:1; }
}
.box{ animation: pop .25s ease-out; }

Notlar

• Animasyonları abartma.
• Performans için transform/opacity.

  Kendin Dene: Playground aç: /tr/playground/html