Zelfstudie CSS-animaties: complete gids voor beginners

Dit is een volledige syntaxisgids en interactieve CSS-animaties voor beginners. Gebruik het als referentie om de verschillende delen van de CSS-animatiespecificaties te leren kennen.

Browserprestaties hebben de afgelopen 10 jaar een lange weg afgelegd. Vroeger was het een stuk uitdagender om interactieve animaties aan webpagina’s toe te voegen vanwege de kans op weergave- en prestatieproblemen. Maar tegenwoordig kunnen CSS-animaties veel vrijer worden gebruikt en is de syntaxis over het algemeen veel gemakkelijker te leren in vergelijking met CSS-functies zoals grid of flexbox.

Er zijn verschillende functies die deel uitmaken van de W3C CSS-animatiespecificatie. Sommige makkelijker in gebruik dan andere. Deze zelfstudie over CSS-sleutelframe-animaties doorloopt alle syntaxis, inclusief elk van de verschillende eigenschappen. Ik zal interactieve demo’s toevoegen om u te helpen begrijpen wat er mogelijk is met CSS-animaties.

De @keyframes-syntaxis

Elke CSS-animatie bestaat uit twee delen: een of meer animation-* eigenschappen samen met een set animatiesleutelframes die zijn gedefinieerd met behulp van de @keyframes op regel. Laten we eens in detail kijken naar wat er komt kijken bij het bouwen van een @keyframes regels ingesteld.

De syntaxis ziet er als volgt uit:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Zoals hier getoond, de @keyframes at-rule bestaat uit drie basisonderdelen:

• De @keyframes regel gevolgd door een aangepaste animatienaam
• Een set accolades die alle keyframes omhult
• Een of meer keyframes, elk met een percentage gevolgd door een regelset omgeven door accolades

In dit eerste voorbeeld van onze tutorial over CSS-animaties heb ik mijn animatie gedefinieerd met de naam moveObject. Dit kan elke gewenste naam zijn, is hoofdlettergevoelig en moet voldoen aan de aangepaste identificatie regels in CSS. Deze aangepaste naam moet overeenkomen met de naam die wordt gebruikt in de animation-name eigendom (wordt later besproken).

In mijn voorbeeld zult u merken dat ik percentages heb gebruikt om elk van de hoofdframes in mijn animatie te definiëren. Als mijn animatie keyframes bevat die gelijk zijn aan 0% en 100%Ik kan ook de from en to trefwoorden:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

De volgende interactieve CodePen gebruikt de bovenstaande syntaxis in een live voorbeeld:

In de demo heb ik een knop toegevoegd die de animatie reset. Ik zal later uitleggen waarom dit nodig is. Maar weet nu dat deze animatie drie hoofdframes bevat die stappen in deze animatiereeks vertegenwoordigen: het begin, de stap van 50% en het einde (d.w.z. 0%, 50% en 100%). Elk van deze gebruikt een zogenaamde keyframe-selector samen met accolades om de eigenschappen bij die stap te definiëren.

Enkele dingen om op te merken over de @keyframes syntaxis:

• U kunt de keyframe-regelsets in elke gewenste volgorde plaatsen en de browser voert ze nog steeds uit in de volgorde die wordt bepaald door hun percentage
• U kunt de 0% en 100% keyframes weglaten en de browser zal deze automatisch bepalen aan de hand van de bestaande stijlen op het element dat wordt geanimeerd
• Als er dubbele keyframes zijn met verschillende regelsets (bijvoorbeeld twee keyframes voor 20% met een verschillende transformatiewaarde), gebruikt de browser de laatste
• U kunt meerdere keyframes definiëren in een enkele keyframekiezer met een komma: 10%, 30% { ... }
• De !important trefwoord maakt elke eigenschapswaarde ongeldig, dus het mag niet worden gebruikt voor een eigenschap binnen een keyframe-regelset

👉 Nu je een goed begrip hebt van de @keyframes syntax laten we in deze zelfstudie over CSS-animatie eens kijken naar de verschillende animatie-eigenschappen die zijn gedefinieerd voor het element dat wordt geanimeerd.

De animatie-eigenschappen die we gaan behandelen:

De eigenschap animatienaam

Zoals eerder vermeld, moet elke CSS-animatie die u maakt een naam hebben die in het @keyframes syntaxis. Deze naam moet dezelfde naam zijn die is gedefinieerd met behulp van de animation-name eigenschap.

Met behulp van de CSS van de vorige demo ziet de syntaxis er als volgt uit:

.box {
  animation-name: moveObject;
}

Nogmaals, de aangepaste naam die ik heb gedefinieerd, moet ook bestaan ​​als een naam voor een @keyframes at-rule – anders zal deze naam niets doen. Je kunt dit zien als een functie oproep in javascript. De functie zelf zou de @keyframes moveObject {} deel van de code, terwijl de functieaanroep is animation-name: moveObject.

Enkele zaken om rekening mee te houden animation-name:

• De beginwaarde voor animation-name is none, wat betekent dat er geen keyframes actief zijn. Dit kan gebruikt worden als een soort ‘toggle’ om een ​​animatie te deactiveren.
• De door u gekozen naam is hoofdlettergevoelig en kan letters, cijfers, onderstrepingstekens en koppeltekens bevatten.
• Het eerste teken in de naam moet een letter of een koppelteken zijn, maar slechts één koppelteken.
• De naam mag geen gereserveerd woord zijn zoals unset, initialof inherit.

De eigenschap animatieduur

De animation-duration eigenschap, geen verrassing, definieert de hoeveelheid tijd die een animatie nodig heeft om één keer van begin tot eind te draaien. Deze waarde kan worden opgegeven in seconden of milliseconden, zoals hieronder weergegeven:

.box {
  animation-duration: 2s;
}

Het bovenstaande zou het equivalent zijn van het volgende:

.box {
  animation-duration: 2000ms;
}

Je kan de … zien animation-duration eigenschap in actie in de volgende CodePen-demo. In deze demo kun je kiezen hoe lang je de animatie wilt laten duren. Probeer verschillende waarden in seconden of milliseconden in te voeren en gebruik vervolgens de knop “Animate the Box” om de animatie uit te voeren.

Als u een klein aantal samen met gebruikt ms voor de eenheid merk je misschien niet eens enige beweging. Probeer een hoger getal in te stellen als u milliseconden gebruikt.

Enkele opmerkingen over het gebruik animation-duration:

• Negatieve waarden zijn ongeldig
• De eenheid moet worden opgenomen, zelfs als de duur is ingesteld op 0s (de beginwaarde)
• U kunt breukwaarden gebruiken (bijv. 0.8s)

De eigenschap animatie-timing-functie

De animation-timing-function, wat niet zo voor de hand liggend is in zijn betekenis als de vorige twee eigenschappen, wordt gebruikt om de manier te definiëren waarop de CSS-animatie vordert. Dat is misschien niet de duidelijkste uitleg, maar de syntaxis kan helpen om het te verduidelijken.

De aangifte ziet er als volgt uit:

.box {
  animation-timing-function: linear;
}

Deze eigenschap accepteert de volgende zoekwoordwaarden:

• ease (de beginwaarde)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

De meeste waarden zijn relatief eenvoudig te begrijpen aan de hand van hun naam, maar u kunt zien hoe ze verschillen door de volgende interactieve demo te gebruiken:

Gebruik de select-invoer om een ​​van de zeven trefwoordwaarden te kiezen. Merk op dat de ease-* waarden ‘vergemakkelijken’ de animatie op verschillende manieren. Een lineaire waarde is helemaal consistent.

De animation-timing-function eigenschap accepteert ook de volgende functies:

• cubic-bezier() – Accepteert als argumenten vier getalswaarden, gescheiden door komma’s
• steps() – Accepteert als argumenten twee waarden, een getal en een “sprongterm”, gescheiden door een komma

De zoekwoordwaarden step-start en step-end zijn gelijk aan de waarden steps(1, jump-start) en steps(1, jump-end)respectievelijk.

Wat betreft cubic-bezier()kan de volgende interactieve demo u helpen de functie iets beter te begrijpen:

Merk op dat u in de demo de vier argumenten kunt instellen in de cubic-bezier() functie. Twee van de argumenten kunnen negatief zijn, en twee zijn beperkt tot decimale waarden tussen 0 en 1. Voor een goede uitleg van hoe dit soort timingfuncties werken, kun je kijken op Dit artikel of deze interactieve tool.

De steps() functie, aan de andere kant, accepteert twee argumenten:

• Een geheel getal dat gelijke “stops” vertegenwoordigt langs een enkele cyclus van de animatie.
• Een optioneel trefwoord dat een “jumpterm” wordt genoemd en dat bepaalt of de animatie met bepaalde tussenpozen “vasthoudt”.

Nogmaals, een interactieve demo zou u moeten helpen begrijpen hoe deze jumpterms werken:

Probeer een geheel getal samen met een jumpterm te selecteren (of probeer het zonder jumpterm) om te zien hoe de verschillende trefwoorden verschillen met verschillende integerwaarden. Blijkbaar zijn negatieve gehele getallen toegestaan, maar ik zie geen verschil tussen 0 en een negatieve waarde.

De eigenschap animatie-iteratie-telling

In sommige gevallen ben je blij als een animatie één keer wordt uitgevoerd, maar soms wil je dat een animatie meerdere keren wordt uitgevoerd. De animation-iteration-count Met de eigenschap kunt u dit doen door een positief getal te accepteren dat het aantal keren aangeeft dat u de animatie wilt laten uitvoeren:

.box {
  animation-iteration-count: 3;
}

De beginwaarde voor animation-iteration-count is 1 maar u kunt ook het trefwoord gebruiken infinite (spreekt zichzelf uit) of gebruik een gebroken waarde. Een fractionele waarde laat de animatie halverwege doorlopen tijdens de fractionele run:

.box {
  animation-iteration-count: 3.5;
}

De bovenstaande code loopt drie en een half keer door de animatie. Dat wil zeggen, drie volledige iteraties gevolgd door één laatste iteratie die precies halverwege stopt.

Deze eigenschap is het handigst wanneer deze wordt gebruikt in combinatie met de animation-direction eigenschap (wordt hierna besproken), omdat een animatie die alleen vanaf het begin wordt uitgevoerd, niet erg handig is als deze meer dan eens wordt uitgevoerd.

U kunt de onderstaande demo proberen, waarmee u een fractionele waarde voor het aantal iteraties kunt selecteren, zodat u het effect kunt zien:

De eigenschap animatierichting

Zoals hierboven vermeld in deze zelfstudie over CSS-animaties, is het animation-direction eigenschap werkt mooi samen met animation-iteration-count. De animation-direction eigenschap stelt u in staat te definiëren in welke richting u de animatie wilt afspelen. De syntaxis ziet er als volgt uit:

.box {
  animation-direction: alternate;
}

U kunt de waarde instellen als een van de vier trefwoorden:

• normal – De animatie speelt vooruit bij de eerste iteratie (standaard)
• reverse – Animatie wordt achterstevoren afgespeeld bij de eerste iteratie
• alternate – De animatie speelt vooruit in de eerste iteratie en wisselt vervolgens af in volgende iteraties
• alternate-reverse – Hetzelfde als alternate maar speelt achteruit op de eerste iteratie

U kunt de verschillende waarden met verschillende iteratietellingen uitproberen met behulp van de onderstaande interactieve demo:

De eigenschap animatie-play-state

De animation-play-state eigenschap is niet erg handig in een statische CSS-omgeving, maar kan handig zijn bij het schrijven van animaties die interactief zijn via JavaScript of zelfs CSS.

Deze eigenschap accepteert twee waarden: running of paused:

.box {
  animation-direction: paused;
}

Elke animatie is standaard in de status “actief”. Maar u kunt JavaScript gebruiken om de waarde van de eigenschap te wijzigen. Je zou zelfs een interactieve CSS-functie kunnen gebruiken, zoals :hover of :focus om de animatie in een “gepauzeerde” staat te veranderen, waardoor de animatie in wezen wordt bevriest, waar deze zich ook bevindt in de huidige iteratie.

De interactieve demo hieronder heeft een oneindig lopende animatie met twee knoppen om de animatie te “pauzeren” en “hervatten”.

De eigenschap animatie-vertraging

Sommige animaties zijn ontworpen om onmiddellijk te beginnen met animeren, terwijl andere baat zouden kunnen hebben bij een kleine vertraging vóór de eerste iteratie. De animation-delay eigendom stelt u in staat om dit te bereiken.

.box {
  animation-delay: 4s;
}

Net als andere op tijd gebaseerde waarden, kunt u de animation-delay naar een waarde in seconden of milliseconden. U kunt ook breukwaarden gebruiken.

Het is belangrijk op te merken dat de vertraging alleen optreedt bij de eerste iteratie, niet bij elke iteratie. U kunt dit uitproberen met behulp van de onderstaande interactieve demo:

De demo geeft je de mogelijkheid om zowel de iteratiewaarde als de vertraging te wijzigen, zodat je kunt zien dat de vertraging geen invloed heeft op volgende iteraties – alleen de eerste.

Een interessante manier om deze eigenschap te gebruiken is met een negatieve waarde. Gebruik bijvoorbeeld de bovenstaande demo om de animation-delay tot -0.5s. Je zult merken dat de negatieve vertraging bijna werkt alsof je vooruitgaat in een tijdmachine: de animatie begint halverwege in plaats van aan het begin.

De eigenschap animatie-vulmodus

De laatste longhand-eigenschap die ik in deze tutorial over CSS-animaties zal behandelen, is er een die ik in de vorige demo heb gebruikt. U zult merken dat wanneer de animatie de laatste iteratie stopt, de doos blijft staan ​​waar hij is. Dit wordt bereikt met behulp van animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Deze eigenschap stelt in hoe een animatie stijlen toepast op het beoogde element voor en na de uitvoering ervan. Dat is conceptueel een beetje moeilijk te vatten, dus ik zal de betekenis van elke waarde behandelen; dan kunt u de waarden vergelijken met behulp van de interactieve demo.

Deze eigenschap accepteert de volgende vier zoekwoordwaarden:

• none – De standaard, geen stijlen toegepast voor of na uitvoering
• forwards – Behoudt alle stijlen die zijn toegepast in het laatste keyframe van de animatie
• backwards – Min of meer het omgekeerde van de vorige waarde, het behoudt stijlen die op de animatie zijn toegepast zodra deze wordt uitgevoerd maar voordat de animatie begint
• both – Behoudt stijlen voor beide forwards en backwards

De laatste demo in deze zelfstudie over CSS-animaties zal de zaken een beetje duidelijker maken, maar deze kan veel spelen voordat je echt begrijpt wat het doet en hoe het dit bereikt.

Voor het gemak heb ik alle demo’s toegevoegd aan een enkele CodePen-collectie.

U zult merken dat u in de demo de vulmodus, vertraging, richting en het aantal iteraties kunt aanpassen, omdat deze allemaal een effect kunnen hebben op het uiterlijk. Ik heb ook een andere achtergrondkleur toegevoegd aan het geanimeerde vak in het eerste hoofdframe, wat weer helpt om de waarden van de vulmodus iets duidelijker te maken. Als je nog steeds niet helemaal begrijpt hoe animation-fill-mode werkt, kunt u uitchecken een ouder artikel Ik schreef dat bespreekt animation-fill-mode diepgaand.

De animatiesteno-eigenschap

Ik heb acht verschillende eigenschappen behandeld in deze CSS-animatie-tutorial voor beginners en ik moedig je aan om de lange hand te gebruiken. Dit maakt het gemakkelijker voor u om de expliciete ingestelde waarden te zien.

Zodra u een goed begrip heeft van elk van de eigenschappen, heeft u de mogelijkheid om de animation steno-eigenschap, waarmee u alle longhand-eigenschappen in één enkele declaratie kunt definiëren.

.box {
  animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;
}

In alle eerlijkheid, dat is veel informatie op één regel. Ik zou aanraden om de afkorting te gebruiken als de declaratie niet alle eigenschappen bevat, maar misschien maar drie of vier.

Als u de afkorting gebruikt, kunt u de waarden in elke gewenste volgorde zetten, maar houd rekening met de volgende regels:

• De eerste waarde die tijd definieert, is de animation-duration; elke volgende tijdwaarde is de animation-delay.
• Als er een conflict is tussen een trefwoord en de animation-nameheeft de trefwoordwaarde voorrang als deze als eerste wordt weergegeven.
• Alle weggelaten waarden vallen terug naar hun oorspronkelijke staat, zoals bij elke CSS-steno-eigenschap.

Meerdere animaties toepassen op één element

Een laatste eigenschap waarvan het goed is om op de hoogte te zijn, is dat je de mogelijkheid hebt om meerdere animaties op een enkel object toe te passen door de animaties door komma’s te scheiden.

Hier is een voorbeeld waarbij de afkorting wordt gebruikt:

.box {
  animation: moveObject 2s ease-in-out, fadeBox 3s linear;
}

Hier heb ik twee verschillende animaties gedefinieerd die zouden worden toegewezen aan twee verschillende sets keyframes, maar die van toepassing zouden zijn op hetzelfde object. Diezelfde code kan met de hand worden geschreven als:

.box {
  animation-name: moveObject, fadeBox;
  animation-duation: 2s, 3s;
  animation-timing-function: ease-in-out, linear;
}

Merk op hoe elke eigenschap twee waarden bevat, gescheiden door komma’s. In dit geval zou de afkorting vrijwel zeker gemakkelijker te lezen en te onderhouden zijn.

Deze zelfstudie over CSS-animaties afronden

👉 Nog een laatste waarschuwing: gebruik animatie met mate en onthoud dat sommige internetgebruikers negatief kunnen worden beïnvloed door knipperende kleuren en andere snel bewegende objecten.