Animatie - CSS-trucs

Anonim

De animationeigenschap in CSS kan worden gebruikt om levende vele andere CSS-eigenschappen, zoals color, background-color, heightof width. Elke animatie moet worden gedefinieerd met de @keyframesat-regel die vervolgens wordt aangeroepen met de animationeigenschap, zoals:

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

Elke @keyframesat-regel bepaalt wat er op specifieke momenten tijdens de animatie moet gebeuren. 0% is bijvoorbeeld het begin van de animatie en 100% is het einde. Deze keyframes kunnen vervolgens worden bestuurd door de steno- animationeigenschap, of de acht sub-eigenschappen, om meer controle te geven over hoe die keyframes moeten worden gemanipuleerd.

Sub-eigenschappen

  • animation-name: verklaart de naam van de @keyframesat-rule die moet worden gemanipuleerd.
  • animation-duration: de tijd die een animatie nodig heeft om één cyclus te voltooien.
  • animation-timing-function: stelt vooraf ingestelde acceleratiecurves in, zoals easeof linear.
  • animation-delay: de tijd tussen het element dat wordt geladen en het begin van de animatiereeks (coole voorbeelden).
  • animation-direction: stelt de richting van de animatie in na de cyclus. De standaardinstellingen worden bij elke cyclus gereset.
  • animation-iteration-count: het aantal keren dat de animatie moet worden uitgevoerd.
  • animation-fill-mode: stelt in welke waarden voor / na de animatie worden toegepast.
    U kunt bijvoorbeeld instellen dat de laatste status van de animatie op het scherm blijft, of u kunt instellen dat deze terugkeert naar het moment waarop de animatie begon.
  • animation-play-state: pauzeer / speel de animatie af.

Deze sub-eigenschappen kunnen dan als volgt worden gebruikt:

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

Hier is een volledige lijst met de waarden die elk van deze subeigenschappen kan hebben:

animation-timing-function gemak, gemak, gemak, gemak, lineair, cubic-bezier (x1, y1, x2, y2) (bijv. cubic-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs of Xms
animation-delay Xs of Xms
animation-iteration-count X
animation-fill-mode vooruit, achteruit, beide, geen
animation-direction normaal, afwisselend
animation-play-state onderbroken, rennen, rennen

Meerdere stappen

Als een animatie dezelfde eigenschappen voor begin en einde heeft, is het handig om de waarden 0% en 100% door komma's te scheiden @keyframes:

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

Meerdere animaties

U kunt de waarden door komma's scheiden om ook meerdere animaties op een selector te declareren. In het onderstaande voorbeeld willen we de kleur van de cirkel in a veranderen, @keyframeterwijl we hem ook heen en weer bewegen met een andere.

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

Prestatie

Het animeren van de meeste property's is een prestatieprobleem, dus we moeten voorzichtig zijn voordat we een property animeren. Er zijn echter bepaalde combinaties die veilig kunnen worden geanimeerd:

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

Welke eigenschappen kunnen worden geanimeerd?

MDN heeft een lijst met CSS-eigenschappen die kunnen worden geanimeerd. Animeerbare eigenschappen neigen naar kleuren en getallen. Een voorbeeld van een niet-animeerbare eigenschap is background-image.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
4 * 5 * 10 12 5,1 *

Mobiel / tablet

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

Meer informatie

  • animatie op MDN
  • CSS-animaties gebruiken
  • animatie op W3C
  • Jank busting voor betere weergaveprestaties
  • Webanimatie op het werk
  • Vijf manieren om verantwoord te animeren
  • State Jumping, negatieve vertragingen, animerende oorsprong en meer
  • Halverwege starten van CSS-animaties
  • Animaties met hoge prestaties