CSS
animaties

Syntaxis

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

parameters

Animaties met de overgangseigenschap

Handig voor eenvoudige animaties, maakt de CSS- transition mogelijk om op cijfers gebaseerde CSS-eigenschappen tussen staten te animeren.

Voorbeeld

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Bekijk resultaat

Als u met de klasse .Example boven een element zweeft, wordt de hoogte van het element standaard onmiddellijk naar 120px en de achtergrondkleur rood ( #ff0000 ).

Door de transition toe te voegen, kunnen we deze wijzigingen in de loop van de tijd veroorzaken:

.Example{
    ...
    transition: all 400ms ease;
}

Bekijk resultaat

De waarde all past de overgang toe op alle compatibele (op cijfers gebaseerde) eigenschappen. Elke compatibele eigenschapsnaam (zoals height of top ) kan worden vervangen door dit trefwoord.

400ms geeft aan hoe lang de overgang duurt. In dit geval duurt het 400 milliseconden om de hoogteverandering van het element te voltooien.

Ten slotte is de waarde ease de animatiefunctie, die bepaalt hoe de animatie wordt afgespeeld. ease betekent langzaam starten, versnellen en vervolgens weer langzaam eindigen. Andere waarden zijn linear , ease-out en ease-in .

Cross-Browser Compatibiliteit

De transition wordt over het algemeen goed ondersteund in alle belangrijke browsers, behalve IE 9. Voor eerdere versies van Firefox en op Webkit gebaseerde browsers, gebruikt u leveranciersvoorvoegsels zoals deze:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Opmerking: de eigenschap transition kan wijzigingen tussen twee numerieke waarden animeren, ongeacht de eenheid. Ook kan de overgang tussen de eenheden, zoals 100px naar 50vh . Het kan echter niet overschakelen tussen een getal en een standaard of automatische waarde, zoals de overgang van de hoogte van een element van 100 100px naar auto .

Animatieprestaties verbeteren met behulp van het kenmerk `will-change`

Bij het maken van animaties en andere GPU-zware acties is het belangrijk om het will-change attribuut te begrijpen.

Beide CSS-hoofdframes en de transition gebruiken GPU-versnelling. De prestaties worden verbeterd door berekeningen te verplaatsen naar de GPU van het apparaat. Dit wordt gedaan door verflagen (delen van de pagina die afzonderlijk worden weergegeven) te maken die naar de GPU worden overgebracht om te worden berekend. De eigenschap will-change vertelt de browser wat zal animeren, waardoor de browser kleinere verfgebieden kan creëren, waardoor de prestaties worden verbeterd.

De eigenschap will-change accepteert een door komma's gescheiden lijst met te animeren eigenschappen. Als u bijvoorbeeld van plan bent een object te transformeren en de dekking ervan te wijzigen, geeft u het volgende op:

.Example{
    ...
    will-change: transform, opacity;
}

Opmerking: gebruik will-change spaarzaam. Het instellen van will-change voor elk element op een pagina kan prestatieproblemen veroorzaken, omdat de browser kan proberen verflagen voor elk element te maken, waardoor de hoeveelheid verwerking door de GPU aanzienlijk wordt verhoogd.

Animaties met hoofdframes

Voor multi-stage CSS-animaties kunt u CSS @keyframes . Met keyframes kunt u meerdere animatiepunten, een keyframe genaamd, definiëren om complexere animaties te definiëren.

Basis voorbeeld

In dit voorbeeld maken we een eenvoudige achtergrondanimatie die tussen alle kleuren wisselt.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Bekijk resultaat

Er zijn een paar verschillende dingen om op te merken. Eerst de daadwerkelijke syntaxis van @keyframes .

@keyframes rainbow-background{

Dit zet de naam van de animatie op rainbow-background .

0%     { background-color: #ff0000; }

Dit is de definitie voor een hoofdframe in de animatie. Het eerste deel, de 0% in het geval, definieert waar het hoofdframe zich bevindt tijdens de animatie. De 0% houdt in dat het 0% is van de totale animatietijd vanaf het begin.

De animatie wordt automatisch overgeschakeld tussen hoofdframes. Dus, door de volgende achtergrondkleur in te stellen op 8.333% , zal de animatie soepel 8.333% van de tijd nodig hebben om over te schakelen tussen die hoofdframes.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Deze code koppelt onze animatie aan alle elementen die de klasse .RainbowBackground .

De eigenlijke animatie-eigenschap heeft de volgende argumenten.

• animatienaam : de naam van onze animatie. In dit geval rainbow-background
• animatieduur : hoe lang de animatie duurt, in dit geval 5 seconden.
• animatie-iteratie-telling (optioneel) : het aantal keren dat de animatie wordt herhaald. In dit geval gaat de animatie voor onbepaalde tijd door. Standaard wordt de animatie eenmaal afgespeeld.
• animatievertraging (optioneel) : geeft aan hoelang moet worden gewacht voordat de animatie wordt gestart. Het is standaard 0 seconden en kan negatieve waarden aannemen. Bijvoorbeeld, -2s start de animatie 2 seconden in zijn lus.
• animatie-timing-functie (optioneel) : specificeert de snelheidscurve van de animatie. De standaardinstelling is ease , waarbij de animatie langzaam begint, sneller wordt en langzaam eindigt.

In dit specifieke voorbeeld geven zowel de 0% als 100% keyframes { background-color: #ff0000; } . Waar twee of meer keyframes een status delen, kan men deze in een enkele instructie specificeren. In dit geval kunnen de twee 0% en 100% lijnen worden vervangen door deze enkele lijn:

0%, 100%     { background-color: #ff0000; }

Cross-browser compatibiliteit

Voor oudere, op WebKit gebaseerde browsers, moet u het leveranciersvoorvoegsel op zowel de @keyframes aangifte als de eigenschap animation , als volgt:

@-webkit-keyframes{}

-webkit-animation: ...

Syntaxis voorbeelden

Ons eerste syntaxisvoorbeeld toont de eigenschap stenografie van animatie met behulp van alle beschikbare eigenschappen / parameters:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Ons tweede voorbeeld is iets eenvoudiger en laat zien dat sommige eigenschappen kunnen worden weggelaten:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Ons derde voorbeeld toont de meest minimale aangifte. Merk op dat de animatienaam en de animatieduur moeten worden aangegeven:

  animation: 3s         slidein;
  /*         duration | name */

Het is ook vermeldenswaard dat bij het gebruik van de animatiekorte de volgorde van de eigenschappen een verschil maakt. Het is duidelijk dat de browser uw duur kan verwarren met uw vertraging.

Als beknoptheid niet jouw ding is, kun je ook de steno-eigenschap overslaan en elke eigenschap afzonderlijk uitschrijven:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;