CSS
animationer

Syntax

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

parametrar

Animationer med övergångsegenskapen

Användbar för enkla animationer, CSS- transition tillåter nummerbaserade CSS-egenskaper att animera mellan stater.

Exempel

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

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

Visa resultat

Som standard skulle svävning över ett element med klassen .Example omedelbart få elementets höjd att hoppa till 120px och dess bakgrundsfärg till röd ( #ff0000 ).

Genom att lägga till transition kan vi göra att dessa ändringar inträffar över tid:

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

Visa resultat

all värde tillämpar övergången till alla kompatibla (siffrebaserade) egenskaper. Alla kompatibla egendomsnamn (t.ex. height eller top ) kan ersättas av detta sökord.

400ms anger hur lång tid övergången tar. I detta fall tar elementets höjdförändring 400 millisekunder att slutföra.

Slutligen är ease animationsfunktionen, som avgör hur animeringen spelas. ease betyder att börja långsamt, snabba upp och sedan sluta långsamt igen. Andra värden är linear , ease-out och ease-in .

Cross-Browser-kompatibilitet

transition stöds vanligtvis väl i alla större webbläsare, med undantag av IE 9. För tidigare versioner av Firefox- och Webkit-baserade webbläsare, använd leverantörsprefix så:

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

Obs: transition kan animera ändringar mellan två numeriska värden, oavsett enhet. Det kan också övergå mellan enheter, till exempel 100px till 50vh . Det kan emellertid inte övergå mellan ett nummer och ett standard- eller automatiskt värde, som att överföra ett elements höjd från 100px till auto .

Öka animationsprestanda med attributet "kommer att ändra"

När du skapar animationer och andra GPU-tunga åtgärder är det viktigt att förstå attributet för will-change av will-change .

Både CSS-nyckelramar och transition använder GPU-acceleration. Prestandan ökar genom beräkningar till enhetens GPU. Detta görs genom att skapa färglager (delar av sidan som är individuellt gjorda) som laddas bort till GPU som ska beräknas. Egenskapen som will-change berättar webbläsaren vad som kommer att animeras, vilket gör att webbläsaren kan skapa mindre färgområden och därmed öka prestandan.

Egenskapen som will-change accepterar en kommaseparerad lista med egenskaper som ska animeras. Om du till exempel planerar att omvandla ett objekt och ändra dess opacitet skulle du ange:

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

Obs! Använd sparsam will-change . Om du ställer in will-change för varje element på en sida kan det orsaka prestandaproblem, eftersom webbläsaren kan försöka skapa färglager för varje element, vilket avsevärt ökar mängden bearbetning som görs av GPU.

Animationer med nyckelrutor

För CSS-animationer med flera steg kan du skapa CSS @keyframes . Med nyckelramar kan du definiera flera animationspunkter, kallad en nyckelram, för att definiera mer komplexa animationer.

Grundläggande exempel

I det här exemplet gör vi en grundläggande bakgrundsanimation som går mellan alla färger.

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

Visa resultat

Det finns några olika saker att notera här. Först själva @keyframes syntaxen.

@keyframes rainbow-background{

Detta sätter namnet på animationen till rainbow-background .

0%     { background-color: #ff0000; }

Detta är definitionen för en nyckelbild inom animeringen. Den första delen, 0% i fallet, definierar var keyframe är under animeringen. 0% antyder att det är 0% av den totala animationstiden från början.

Animationen övergår automatiskt mellan nyckelrutor. Genom att ställa in nästa bakgrundsfärg på 8.333% animationen smidigt 8,333% av tiden för övergången mellan dessa nyckelramar.

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

Den här koden fäster vår animation till alla element som har klassen .RainbowBackground .

Den egentliga animationsegenskapen tar följande argument.

• animation-name : Namnet på vår animation. I detta fall rainbow-background
• animation-varaktighet : Hur lång tid animationen tar, i detta fall 5 sekunder.
• animation-iteration-count (valfritt) : Antalet gånger animeringen kommer att slinga. I det här fallet kommer animationen att fortsätta på obestämd tid. Som standard spelas animationen en gång.
• animationsfördröjning (valfritt) : Anger hur länge du ska vänta innan animationen startar. Det är som standard 0 sekunder och kan ta negativa värden. Till exempel skulle -2s starta animationen 2 sekunder i sin slinga.
• animation-timing-funktion (valfritt) : Anger animeringens hastighetskurva. Det är standard att ease , där animeringen börjar långsamt, blir snabbare och slutar långsamt.

I det här exemplet anger både 0% och 100% nyckelramar { background-color: #ff0000; } . Varhelst två eller flera nyckelramar delar ett tillstånd, kan man ange dem i ett enda uttalande. I det här fallet kan de två linjerna 0% och 100% ersättas med denna enda rad:

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

Cross-browser kompatibilitet

För äldre WebKit-baserade webbläsare måste du använda leverantörens prefix på både @keyframes deklarationen och animation , så:

@-webkit-keyframes{}

-webkit-animation: ...

Syntaxexempel

Vårt första syntaxexempel visar egenskapen för korthet för animering med alla tillgängliga egenskaper / parametrar:

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

Vårt andra exempel är lite mer enkelt och visar att vissa egenskaper kan utelämnas:

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

Vårt tredje exempel visar den mest minimala deklarationen. Observera att animationsnamnet och animationens varaktighet måste deklareras:

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

Det är också värt att nämna att när man använder animationen kortfattad ordning på egenskaperna gör en skillnad. Uppenbarligen kan webbläsaren förväxla din varaktighet med din försening.

Om korthet inte är din sak, kan du också hoppa över den korta egenskapen och skriva ut varje egenskap individuellt:

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;