Animacija - CSS-triki

Anonim

animationHotel v CSS se lahko uporablja za animacijo mnogih drugih CSS lastnosti, kot so color, background-color, height, ali width. Vsako animacijo je treba definirati s @keyframespravilom at, ki se nato pokliče z animationlastnostjo, takole:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Vsako @keyframespravilo določa, kaj naj se zgodi v določenih trenutkih med animacijo. Na primer, 0% je začetek animacije in 100% konec. Te ključne okvire lahko nato nadzira bodisi stenografska animationlastnost bodisi osem njegovih pod-lastnosti, da dobite več nadzora nad tem, kako je treba s temi ključnimi okvirji manipulirati.

Pod-lastnosti

  • animation-name: izjavlja ime @keyframespravilnika za manipulacijo.
  • animation-duration: čas, potreben za animacijo, da zaključi en cikel.
  • animation-timing-function: vzpostavi prednastavljene krivulje pospeševanja, kot je easeali linear.
  • animation-delay: čas med elementom, ki se naloži, in začetkom zaporedja animacije (kul primeri).
  • animation-direction: nastavi smer animacije po ciklu. Privzeto se ponastavi za vsak cikel.
  • animation-iteration-count: število izvedb animacije.
  • animation-fill-mode: nastavi, katere vrednosti se uporabijo pred / po animaciji.
    Na primer, lahko nastavite, da zadnje stanje animacije ostane na zaslonu, ali pa ga nastavite tako, da se preklopi nazaj pred začetkom animacije.
  • animation-play-state: začasno ustavi / predvajaj animacijo.

Te pod-lastnosti lahko nato uporabite tako:

@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; )

Tu je popoln seznam vrednosti, ki jih lahko sprejme vsaka od teh pod-lastnosti:

animation-timing-function enostavnost, sprostitev, sprostitev, sprostitev, linearna, kubična bezierja (x1, y1, x2, y2) (npr. kubična bezierja (0,5, 0,2, 0,3, 1,0))
animation-duration Xs ali Xms
animation-delay Xs ali Xms
animation-iteration-count X
animation-fill-mode naprej, nazaj, oboje, nobeno
animation-direction normalno, nadomestno
animation-play-state zaustavljen, tek, tek

Več korakov

Če ima animacija enake začetne in končne lastnosti, je koristno ločiti vrednosti 0% in 100% znotraj vejice @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Več animacij

Vrednosti lahko ločite z vejico, da na izbirniku prijavite tudi več animacij. V spodnjem primeru želimo spremeniti barvo kroga, @keyframehkrati pa ga potiskati z ene strani na drugo.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Izvedba

Animiranje večine lastnosti je zaskrbljujoče zaradi zmogljivosti, zato moramo biti pred animiranjem lastnosti previdni. Vendar pa obstajajo določene kombinacije, ki jih je mogoče varno animirati:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Katere lastnosti je mogoče animirati?

MDN ima seznam lastnosti CSS, ki jih je mogoče animirati. Animirane lastnosti ponavadi vplivajo na barve in številke. Primer neanimirane lastnosti je background-image.

Podpora brskalnika

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
4 * 5 * 10. 12. 5,1 *

Mobilni / tablični računalnik

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

Več informacij

  • animacija na MDN
  • Uporaba CSS animacij
  • animacija na W3C
  • Jank propad za boljše upodabljanje
  • Spletna animacija pri delu
  • Pet načinov odgovornega animiranja
  • Državni skoki, negativne zamude, živalski izvor in še več
  • Zagon animacij CSS na sredini
  • Visoko zmogljive animacije