Syntaxis van keyframe-animatie - CSS-trucs

Anonim

Basisverklaring en gebruik

@-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+ */ )

Om het kort te houden zal de rest van de code op deze pagina geen voorvoegsels gebruiken, maar voor gebruik in de echte wereld moeten alle leveranciersvoorvoegsels van hierboven worden gebruikt

Meerdere stappen

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

Als een animatie dezelfde begin- en eindtijden heeft, kunt u dat doen door de waarden 0% en 100% door komma's te scheiden:

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

Of je kunt de animatie altijd twee keer (of een even aantal keren) laten draaien en de richting aangeven alternate.

Aanroepen van keyframe-animatie met afzonderlijke eigenschappen

.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 */ )

Animatie steno

Scheid gewoon alle individuele waarden door een spatie. De volgorde doet er niet toe, behalve wanneer u zowel de duur als de vertraging gebruikt, ze moeten in die volgorde staan. In het onderstaande voorbeeld 1s = duur, 2s = vertraging, 3 = iteraties.

animation: test 1s 2s 3 alternate backwards

Combineer transformatie en animatie

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

Meerdere animaties

U kunt de waarden door komma's scheiden om meerdere animaties op een selector te declareren.

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

Stappen()

De functie steps () bepaalt precies hoeveel keyframes er in de animatietijd worden weergegeven. Laten we zeggen dat u verklaart:

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

Als u stappen (10) in uw animatie gebruikt, zorgt het ervoor dat er in de toegewezen tijd slechts 10 keyframes plaatsvinden.

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

De wiskunde komt daar goed uit. Elke seconde wordt het element 10 px naar links en 10 px naar beneden verplaatst, tot het einde van de animatie, en dan weer voor altijd in omgekeerde volgorde.

Dit kan geweldig zijn voor spritesheet-animaties zoals deze demo van simurai.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
4 * 5 * 10 12 5,1 *

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Meer middelen

  • MDN Docs
  • MDN: CSS-animatie gebruiken
  • Kan ik gebruiken - Browserondersteuning
  • VIDEO: Inleiding tot CSS-animaties