Sintaxa animației cadrului cheie - CSS-Tricks

Anonim

Declarație de bază și utilizare

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Din motive de scurtă durată, restul codului de pe această pagină nu va folosi niciun prefix, dar utilizarea din lumea reală ar trebui să utilizeze toate prefixele furnizorului de mai sus

Pași multipli

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Dacă o animație are aceleași proprietăți de început și de sfârșit, o modalitate de a face acest lucru este separarea prin virgulă a valorilor 0% și 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Sau, puteți spune întotdeauna animației să ruleze de două ori (sau orice număr par de ori) și să spuneți direcția către alternate.

Apelarea animației cadrului cheie cu proprietăți separate

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Stenografie de animație

Doar spațiu-separați toate valorile individuale. Comanda nu contează decât atunci când se utilizează atât durata, cât și întârzierea, acestea trebuie să fie în această ordine. În exemplul de mai jos 1s = durata, 2s = întârziere, 3 = iterații.

animation: test 1s 2s 3 alternate backwards

Combinați transformarea și animația

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Animații multiple

Puteți separa valorile prin virgulă pentru a declara mai multe animații pe un selector.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Pași ()

Funcția step () controlează exact câte cadre cheie vor fi redate în intervalul de timp al animației. Să presupunem că declarați:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Dacă utilizați pașii (10) în animație, se va asigura că numai 10 cadre cheie se vor întâmpla în timpul alocat.

.move ( animation: move 10s steps(10) infinite alternate; )

Matematica funcționează frumos acolo. La fiecare secundă, elementul se va deplasa 10px la stânga și 10px în jos, până la sfârșitul animației și apoi din nou în sens invers.

Acest lucru poate fi minunat pentru animația de foi de calcul, cum ar fi această demonstrație de către simurai.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
4 * 5 * 10 12 5.1 *

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 4 * 6.0-6.1 *

Mai multe resurse

  • Documente MDN
  • MDN: Utilizarea animației CSS
  • Pot folosi - Asistență pentru browser
  • VIDEO: Introducere în animații CSS