animation
Vara CSS saab animeerida paljud teised CSS omadused nagu color
, background-color
, height
, või width
. Iga animatsioon tuleb määratleda @keyframes
reegliga at, mida seejärel kutsutakse animation
atribuudiga, näiteks:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )
Iga @keyframes
reegel määrab kindlaks, mis peaks animatsiooni ajal konkreetsetel hetkedel juhtuma. Näiteks 0% on animatsiooni algus ja 100% lõpp. Neid võtmekaadreid saab seejärel juhtida kas lühikese animation
omaduse või selle kaheksa alaomaduse abil, et anda rohkem kontrolli nende võtmekaadrite käsitsemise üle.
Alamomadused
animation-name
: kuulutab@keyframes
manipuleeritava reegli nime .animation-duration
: animatsiooni ühe tsükli lõpuleviimiseks kuluv aeg.animation-timing-function
: loob eelseadistatud kiirenduskõverad naguease
võilinear
.animation-delay
: aeg elemendi laadimise ja animatsioonisarja alguse vahel (lahedad näited).animation-direction
: määrab animatsiooni suuna pärast tsüklit. Selle vaikeseaded lähtestatakse igas tsüklis.animation-iteration-count
: animatsiooni sooritamise kordade arv.animation-fill-mode
: määrab, milliseid väärtusi rakendatakse enne / pärast animatsiooni.
Näiteks võite seada animatsiooni viimase oleku ekraanil püsimiseks või selle, et see lülituks tagasi enne animatsiooni algust.animation-play-state
: animatsiooni peatamine / esitamine.
Neid alamomadusi saab seejärel kasutada järgmiselt:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )
Siin on täielik loetelu, milliseid väärtusi võib kumbki neist atribuutidest võtta:
animation-timing-function | lihtsus, kergendus, hõlpsus sisse, hõlpsasti sisse, lineaarne, kuupbezier (x1, y1, x2, y2) (nt kuupbezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs või Xms |
animation-delay | Xs või Xms |
animation-iteration-count | X |
animation-fill-mode | edasi, tahapoole, mõlemad, mitte ühtegi |
animation-direction | tavaline, asendusliige |
animation-play-state | paus, jooksmine, jooksmine |
Mitu sammu
Kui animatsioonil on samad algus- ja lõppomadused, on kasulik eraldada komades 0% ja 100% väärtused koma abil @keyframes
:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )
Mitu animatsiooni
Mitme animatsiooni deklareerimiseks valijas saate väärtused komaga eraldada. Allpool toodud näites soovime muuta ringi värvi @keyframe
üheaegselt, samal ajal nihutades seda ka küljelt teisele.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )
Performance
Enamiku omaduste animeerimine on toimivusprobleem, seega peaksime enne mis tahes vara animeerimist olema ettevaatlik. Siiski on teatud kombinatsioone, mida saab ohutult animeerida:
transform: translate()
transform: scale()
transform: rotate()
opacity
Milliseid omadusi saab animeerida?
MDN-is on loend CSS-i omadustest, mida saab animeerida. Animeeritavad omadused kalduvad värvide ja arvude järgi. Mitte-animeeritav atribuut on background-image
.
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 informatsiooni
- animatsioon MDN-is
- CSS-animatsioonide kasutamine
- animatsioon W3C-s
- Tank puruneb parema renderduse saavutamiseks
- Veebianimatsioon tööl
- Viis võimalust vastutustundlikuks animeerimiseks
- Riigi hüpped, negatiivsed viivitused, päritolu animeerimine ja palju muud
- CSS-animatsioonide alustamine keskel
- Suure jõudlusega animatsioonid