CSS animation

CSS animation

CSS kan realisere animationseffekter for HTML-elementer uden at bruge JavaScript eller Flash!

CSS

I dette kapitel vil du lære følgende egenskaber:

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

Browserstøtte for animationer

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

属性 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

Hvad er CSS-animation?

Animationer får elementer gradvist fra én stil til en anden.

Du kan frit ændre et hvilket som helst antal CSS-egenskaber.

For at bruge CSS-animationer skal du først specificere nogle kerningrammer for animationen.

Kerningrammer indeholder stilen, som elementet har på et bestemt tidspunkt.

@keyframes-reglen

Hvis du i @keyframes Reglen specificerer CSS-stil, og animationen ændrer sig gradvist fra den nuværende stil til den nye stil på et bestemt tidspunkt.

For at gøre animationen effektiv, skal du binde animationen til et element.

Dette eksempel binder "example"-animationen til <div>-elementet. Animationen varer 4 sekunder, og baggrundsfarven på <div>-elementet ændres gradvist fra "red" til "yellow":

实例

/* Animasjonskoden */
@keyframes example {
  fra {background-color: red;}
  til {background-color: yellow;}
}
/* Anvend animationseffekt på dette element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Bemærk:animation-duration Egenskab definerer, hvor lang tid animationen skal tage at fuldføre. Hvis ikke specificeret animation-duration Egenskab, så vil animationen ikke finde sted, fordi standardværdien er 0s (0 sekunder).

I det ovenstående eksempel har vi med nøgordene "fra" og "til" (som repræsenterer 0% (start) og 100% (afslutning)) sat, hvornår stilen skal ændres.

Du kan også bruge procenter. Ved at bruge procenter kan du tilføje så mange stilændringer, som du har brug for.

Dette eksemplet vil ændre baggrundsfarven på <div>-elementet, når animationen er fuldført 25%, 50% og 100%.

实例

/* Animasjonskoden */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementer som appliserer animasjon */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Dette eksempelet endrer bakgrunnsfarge og <div>-elementets posisjon når animasjonen er ferdig 25%, 50% og 100%:

实例

/* Animasjonskoden */
@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;}
}
/* Elementer som appliserer animasjon */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Forsinket animasjon

animation-delay Egenskapen definerer forsinkelsen før animasjonen starter.

Dette eksempelet har en forsinkelse på 2 sekunder før animasjonen starter:

实例

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

亲自试一试

Negativ verdier er også tillatt. Hvis du bruker en negativ verdi, starter animasjonen som om den allerede har spilt N sekunder.

I dette eksempelet starter animasjonen som om den allerede har spilt 2 sekunder:

实例

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

亲自试一试

Sett hvor mange ganger animasjonen skal kjøre

animation-iteration-count Egenskapen spesifiserer hvor mange ganger animasjonen skal kjøre.

Dette eksempelet kjører animasjonen 3 ganger før den stopper:

实例

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

亲自试一试

Dette eksempelet bruker verdien "infinite" for å gjøre animasjonen fortsette for alltid:

实例

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

亲自试一试

Reversere eller alternere animasjon

animation-direction Egenskapen spesifiserer om animasjonen skal spille fremover, bakover eller alternativt.

animation-direction Egenskaben kan acceptere følgende værdier:

  • normal - Animasjonen spiller normalt (fremover). Standardverdi
  • reverse - Animasjonen spiller i motsatt retning (bakover)
  • alternate - Animasjonen spiller først fremover, og deretter bakover
  • alternate-reverse - Animasjonen spiller først bakover, og deretter fremover

Følgende eksempel kjører animasjonen i motsatt retning (bakover):

实例

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

亲自试一试

Dette eksempelet bruker verdien "alternate" for å gjøre animasjonen kjøre fremover før den kjører bakover:

实例

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

亲自试一试

Dette eksempelet bruker verdien "alternate-reverse" for å gjøre animasjonen kjøre bakover før den kjører fremover:

实例

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

亲自试一试

Angiv animationens hastighedskurve

animation-timing-function Egenskaben bestemmer animationens hastighedskurve.

animation-timing-function Egenskaben kan acceptere følgende værdier:

  • ease - Angiv en animation, hvor der starter langsomt, derefter accelererer og derefter afsluttes langsomt (standard)
  • linear - Angiv en animation, hvor hastigheden er konstant fra begyndelse til afslutning
  • ease-in - Angiv en animation, hvor begyndelsen er langsommere
  • ease-out - Angiv en animation, hvor afslutningen er langsommere
  • ease-in-out - Angiv en animation, hvor begyndelsen og afslutningen er langsommere
  • cubic-bezier(n,n,n,n) - Kør dine egne værdier defineret i en tredobbelt Bezier-funktion

Disse eksempler viser nogle af de forskellige hastighedskurver, der kan bruges:

实例

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

亲自试一试

Angiv animationens fyldningsmåde

CSS-animation påvirker ikke elementet før den første nøgleframe afspilles eller efter den sidste nøgleframe afspilles.animation-fill-mode kan egenskaben over ride dette adfærd.

Når animationen ikke afspilles (før starten, efter afslutningen eller begge dele),animation-fill-mode Egenskaben bestemmer stilen på målelementet.

animation-fill-mode-eegenskaben kan acceptere følgende værdier:

  • none - Standardværdi. Animation påføres ikke nogen stil til elementet før eller efter udførsel.
  • forwards - Elementet holder på stilværdierne sat af den sidste nøgleframe (afhængigt af animation-direction og animation-iteration-count).
  • backwards - Elementet får stilværdierne sat af den første nøgleframe (afhængigt af animation-direction) og holder værdien under animationens forsinkelse.
  • both - Animationen følger både fremad- og baglænsregler, hvilket udvider animationseegenskaberne i begge retninger.

Dette eksempel lader <div>-elementet beholde stilværdier fra den sidste nøgleframe efter afslutningen af animationen:

实例

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

亲自试一试

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

实例

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

亲自试一试

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

实例

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

亲自试一试

动画简写属性

下例使用六种动画属性：

实例

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

亲自试一试

使用简写的 animation 属性也可以实现与上例相同的动画效果：

实例

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

亲自试一试

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性 描述
@keyframes 规定动画模式。
animation 设置所有动画属性的简写属性。
animation-delay 规定动画开始的延迟。
animation-direction 定动画是向前播放、向后播放还是交替播放。
animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state Fastlægger, om animationen kører eller pauser.
animation-timing-function Fastlægger hastighedskurven for animationen.