De animation
eigenschap in CSS kan worden gebruikt om levende vele andere CSS-eigenschappen, zoals color
, background-color
, height
of width
. Elke animatie moet worden gedefinieerd met de @keyframes
at-regel die vervolgens wordt aangeroepen met de animation
eigenschap, zoals:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )
Elke @keyframes
at-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- animation
eigenschap, 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@keyframes
at-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, zoalsease
oflinear
.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, @keyframe
terwijl 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