Keyframe animācijas sintakse - CSS-triki

Anonim

Deklarācija un izmantošana

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

Īsuma labad pārējā šajā lapā esošajā kodā netiks izmantoti prefiksi, taču, lietojot reālajā pasaulē, jāizmanto visi pārdevēja prefiksi no augšas.

Vairāki soļi

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

Ja animācijai ir vienādas sākuma un beigu īpašības, viens no veidiem, kā to izdarīt, ir komatu atdalīšana no 0% un 100%:

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

Vai arī jūs vienmēr varat pateikt animācijai, lai tā darbojas divreiz (vai jebkuru pāra reižu skaitu) un norāda virzienu alternate.

Zvanīšana uz galveno kadru animāciju ar atsevišķām īpašībām

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

Animācijas stenogrāfija

Vienkārši atstājiet atstarpi visas individuālās vērtības. Pasūtījumam nav nozīmes, izņemot gadījumus, kad tiek izmantots gan ilgums, gan aizkave, tiem jābūt tādā secībā. Zemāk esošajā piemērā 1s = ilgums, 2s = kavēšanās, 3 = atkārtojumi.

animation: test 1s 2s 3 alternate backwards

Apvienojiet pārveidošanu un animāciju

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

Vairākas animācijas

Vērtības var atdalīt ar komatu, lai atlasītājā deklarētu vairākas animācijas.

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

Soļi ()

Funkcija steps () kontrolē tieši to, cik daudz galveno kadru tiks rādīti animācijas laika posmā. Pieņemsim, ka jūs paziņojat:

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

Ja animācijā izmantojat darbības (10), tas nodrošinās, ka paredzētajā laikā notiek tikai 10 atslēgkadri.

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

Matemātika tur labi izdodas. Katru sekundi elements līdz animācijas beigām pārvietosies 10 pikseļus pa kreisi un 10 pikseļus uz leju, un pēc tam atkal uz visiem laikiem.

Tas var būt lieliski piemērs spritesheet animācijai, piemēram, šim simurai demonstrējumam.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

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

Mobilais / planšetdators

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

Vairāk resursu

  • MDN dokumenti
  • MDN: CSS animācijas izmantošana
  • Vai es varu izmantot - pārlūkprogrammas atbalstu
  • VIDEO: ievads CSS animācijām