CSS animation

CSS animation

CSS kan åstadkomma animationseffekter för HTML-element utan att använda JavaScript eller Flash!

CSS

I detta kapitel kommer du att lära dig följande egenskaper:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Webbläsarstöd för animation

Talen i tabellen anger den första webbläsaren som helt stöder egenskapen.

Egenskap Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Vad är CSS-animation?

Animation gör att elementet gradvis ändrar från en stil till en annan.

Du kan fritt ändra så många CSS-egenskaper som du vill.

För att använda CSS-animation måste du först specificera några viktiga ramar för animationen.

Inkluderar vissa ramar elementet har vid specifika tidpunkter.

@keyframes-regeln

Om du i @keyframes Reglerna specificerar CSS-stilar, och animationen kommer att gradvis ändra från nuvarande stil till ny stil vid specifika tidpunkter.

För att göra animationen effektiv måste du binda den till ett element.

Följande exempel binder "example"-animationen till <div>-elementet. Animationen kommer att pågå i 4 sekunder och ändra bakgrundsfärgen på <div>-elementet från "red" till "yellow":

Exempel

/* Animaationskod */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Tillämpa animationseffekten på detta element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova själv

Observera:animation-duration Egenskapen definierar hur lång tid det tar för animationen att slutföras. Om det inte anges animation-duration Om du inte anger värde för egenskapen, kommer animationen inte att inträffa, eftersom standardvärdet är 0s (0 sekunder).

I det tidigare exemplet har vi genom att använda nyckelorden "from" och "to" (som representerar 0% (start) och 100% (slut)) satt när stilen ska ändras.

Du kan också använda procentvärden. Genom att använda procent kan du lägga till så många stiländringar som du behöver.

Följande exempel kommer att ändra bakgrundsfärgen på <div>-elementet när animationen är klar 25%, klar 50% och när animationen är klar 100%:

Exempel

/* Animaationskod */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Element som tillämpar animation */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova själv

Nedanstående exempel ändrar bakgrundsfärg och <div>-elementets position när animationen är 25%, 50% och 100% klar:

Exempel

/* Animaationskod */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Element som tillämpar animation */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova själv

Fördröj animation

animation-delay Egenskapen specificerar fördröjningen innan animationen börjar.

Nedanstående exempel har en fördröjning på 2 sekunder innan animationen börjar:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Prova själv

Negativa värden är också tillåtna. Om ett negativt värde används, börjar animationen spela som om den redan har spelat N sekunder.

I det följande exemplet börjar animationen spela, som om den redan har spelat 2 sekunder:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Prova själv

Ställ in hur många gånger animationen ska köras

animation-iteration-count Egenskapen specificerar hur många gånger animationen ska köras.

Nedanstående exempel kör animationen 3 gånger innan den stoppar:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Prova själv

Nedanstående exempel använder värdet "infinite" för att göra animationen permanent:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Prova själv

Använda bakåt- eller varierande animation

animation-direction Egenskapen specificerar om animationen ska spelas framåt, bakåt eller variera

animation-direction Egenskapen accepterar följande värden:

  • normal - Animera normalt (framåt). Standardvärde
  • reverse - Animera i motsatt riktning (bakåt)
  • alternate - Animera först framåt och sedan bakåt
  • alternate-reverse - Animera först bakåt och sedan framåt

Nedanstående exempel kommer att animera i motsatt riktning (bakåt):

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Prova själv

Nedanstående exempel använder värdet "alternate" för att animera i riktning framåt och sedan bakåt:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Prova själv

Nedanstående exempel använder värdet "alternate-reverse" för att animera i riktning bakåt och sedan framåt:

Exempel

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Prova själv

Specificera animationens hastighetskurva

animation-timing-function Egenskapen definierar animationens hastighetskurva.

animation-timing-function Egenskapen accepterar följande värden:

  • ease - Specificera en animation som börjar långsamt, sedan accelererar och slutar långsamt (standard)
  • linear - Specificera en animation där hastigheten är densamma från början till slutet
  • ease-in - Specificera en animation som börjar långsamt
  • ease-out - Specificera en animation som slutar långsamt
  • ease-in-out - Specificera en animation som börjar och slutar långsammare
  • cubic-bezier(n,n,n,n) - Kör dina egna värden definierade i en tredjedels Béziers-funktion

Följande exempel visar några olika hastighetskurvor som kan användas:

Exempel

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Prova själv

Specificera animationens fyllningsmönster

CSS-animation påverkar inte elementet innan den första viktiga ramen spelas eller efter att den sista viktiga ramen spelas.animation-fill-mode kan egenskapen överskriva detta beteende.

När animationen inte spelas upp (innan starten, efter slutet eller båda gångerna),animation-fill-mode Egenskapen definierar stilen för målelementet.

animation-fill-mode-attributet accepterar följande värden:

  • none - Standardvärde. Animationen applicerar inte några stilar på elementet innan eller efter utförandet.
  • forwards - Elementet kommer att behålla stilvärden från den sista viktiga ramen (beroende på animation-direction och animation-iteration-count).
  • backwards - Elementet kommer att få stilvärden från den första viktiga ramen (beroende på animation-direction) och behålla detta värde under animationens fördröjning.
  • both - Animationen följer både framåt- och bakåtriktade regler, vilket utökar animationsegenskaperna i båda riktningarna.

Exempelvis låter den här animeringen behålla stilvärden från den sista viktiga ramen när animationen avslutas: <div>

Exempel

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Prova själv

Följande exempel gör att <div>-elementet får det första viktiga ramens stilvärde innan animationen börjar (under animationens fördröjning):

Exempel

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Prova själv

Följande exempel gör att <div>-elementet får den första viktiga ramens stilvärde innan animationen börjar och behåller det sista viktiga ramens stilvärde efter animationen avslutas:

Exempel

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Prova själv

Animationens förkortade egenskaper

Följande exempel använder sex animationsegenskaper:

Exempel

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Prova själv

Använd förkortad animation Egenskapen kan också uppnå samma animationseffekt som i föregående exempel:

Exempel

div {
  animation: example 5s linear 2s infinite alternate;
}

Prova själv

CSS-animationsegenskaper

Följande tabell visar @keyframes-regeln och alla CSS-animationsegenskaper:

Egenskap Beskrivning
@keyframes Specificerar animationens läge.
animation Ställer in en förkortad egenskap för alla animationsegenskaper.
animation-delay Specificerar fördröjningen innan animationen börjar.
animation-direction Bestämmer om animationen spelas framåt, bakåt eller växling.
animation-duration Specificerar hur lång tid en cykel av animationen ska ta.
animation-fill-mode Specificerar stilen för elementet när animationen inte spelas upp (innan början, efter slutet, eller båda samtidigt).
animation-iteration-count Specificerar hur många gånger animationen ska spelas upp.
animation-name Specificerar namnet på @keyframes-animeringen.
animation-play-state Bestämmer om animationen körs eller pausas.
animation-timing-function Bestämmer animationens hastighetskurva.