Animație - CSS-Tricks

Anonim

animationProprietatea în CSS poate fi folosit pentru a anima multe alte proprietăți CSS , cum ar fi color, background-color, height, sau width. Fiecare animație trebuie definită cu @keyframesat-rule, care este apoi apelată cu animationproprietatea, astfel:

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

Fiecare @keyframesregulă definește ce ar trebui să se întâmple în anumite momente din timpul animației. De exemplu, 0% este începutul animației și 100% este sfârșitul. Aceste cadre cheie pot fi apoi controlate fie de animationproprietatea de scurtare , fie de cele opt sub-proprietăți ale acesteia, pentru a oferi mai mult control asupra modului în care aceste cadre cheie ar trebui manipulate.

Sub-proprietăți

  • animation-name: declară numele @keyframesregulii de manipulat.
  • animation-duration: durata de timp necesară unei animații pentru a finaliza un ciclu.
  • animation-timing-function: stabilește curbe de accelerație prestabilite precum easesau linear.
  • animation-delay: timpul dintre elementul încărcat și începutul secvenței de animație (exemple interesante).
  • animation-direction: setează direcția animației după ciclu. Resetările implicite ale acestuia la fiecare ciclu.
  • animation-iteration-count: de câte ori ar trebui efectuată animația.
  • animation-fill-mode: stabilește ce valori sunt aplicate înainte / după animație.
    De exemplu, puteți seta ultima stare a animației să rămână pe ecran sau o puteți seta pentru a reveni la înainte de a începe animația.
  • animation-play-state: întrerupeți / redați animația.

Aceste sub-proprietăți pot fi folosite astfel:

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

Iată o listă completă a valorilor pe care le poate lua fiecare dintre aceste proprietăți secundare:

animation-timing-function ușurință, ușurință-ieșire, ușurință-intrare, ușurință-ieșire, liniar, cubic-bezier (x1, y1, x2, y2) (de exemplu cubic-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration X sau Xms
animation-delay X sau Xms
animation-iteration-count X
animation-fill-mode înainte, înapoi, ambele, nici unul
animation-direction normal, alternativ
animation-play-state întrerupt, alergând, alergând

Pași multipli

Dacă o animație are aceleași proprietăți de început și de sfârșit, este util să separați prin virgulă valorile 0% și 100% din interior @keyframes:

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

Animații multiple

Puteți separa valorile prin virgulă pentru a declara mai multe animații și pe un selector. În exemplul de mai jos, vrem să schimbăm culoarea cercului într-o, în @keyframetimp ce o împingem de la o parte la alta cu alta.

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

Performanţă

Animarea majorității proprietăților este o problemă de performanță, deci ar trebui să procedăm cu prudență înainte de a anima orice proprietate. Cu toate acestea, există anumite combinații care pot fi animate în siguranță:

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

Ce proprietăți pot fi animate?

MDN are o listă de proprietăți CSS care pot fi animate. Proprietățile animabile tind spre culori și numere. Un exemplu de proprietate non-animabilă este background-image.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
4 * 5 * 10 12 5.1 *

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 4 * 6.0-6.1 *

Mai multe informatii

  • animație pe MDN
  • Utilizarea animațiilor CSS
  • animație pe W3C
  • Jank se rupe pentru o performanță mai bună de redare
  • Animație web la locul de muncă
  • Cinci moduri de a anima în mod responsabil
  • Salt de stat, întârzieri negative, animarea originii și multe altele
  • Lansarea animațiilor CSS la jumătatea drumului
  • Animații de înaltă performanță