Keyframe'i animatsiooni süntaks - CSS-trikid

Anonim

Põhideklaratsioon ja kasutamine

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

Lühiduse huvides ei kasuta ülejäänud sellel lehel olev kood eesliiteid, kuid reaalses maailmas peaks kasutama kõiki ülaltoodud müüja eesliiteid

Mitu sammu

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

Kui animatsioonil on samad algus- ja lõppomadused, on üks võimalus selleks 0–100-protsendiliste väärtuste komaga eraldamine:

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

Või võite alati öelda, et animatsioon käivitub kaks korda (või suvaline arv kordi) ja ütleb suuna alternate.

Eraldi omadustega võtmekaadri animatsioonile helistamine

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

Animatsioon Lühike

Lihtsalt tühiku abil eraldage kõik üksikud väärtused. Tellimus ei oma tähtsust, välja arvatud juhul, kui kasutatakse nii kestust kui ka viivitust, need peavad olema selles järjekorras. Allpool toodud näites 1s = kestus, 2s = viivitus, 3 = iteratsioonid.

animation: test 1s 2s 3 alternate backwards

Ühendage teisendamine ja animatsioon

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

Mitu animatsiooni

Valikuga mitme animatsiooni deklareerimiseks võite väärtused komaga eraldada.

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

Sammud()

Funktsioon steps () kontrollib täpselt seda, mitu võtmekaadrit animatsiooni ajaraamis renderdatakse. Oletame, et deklareerite:

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

Kui kasutate animatsioonis samme (10), tagab see, et määratud aja jooksul toimub ainult 10 võtmekaadrit.

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

Matemaatika saab seal kenasti hakkama. Iga sekundi järel liigub element kuni animatsiooni lõpuni 10 pikslit vasakule ja 10 pikslit allapoole ning seejärel igaveseks tagasi.

See võib olla suurepärane spritesheet-animatsiooni jaoks, nagu see simurai demo.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
4 * 5 * 10 12 5,1 *

Mobiil / tahvelarvuti

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

Rohkem ressursse

  • MDN-i dokumendid
  • MDN: CSS-i animatsiooni kasutamine
  • Kas ma saan kasutada - brauseri tugi
  • VIDEO: CSS-animatsioonide tutvustus