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

Browserunderstøttelse af 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 en 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 nøgleframer for animationen.

Kerneframer 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 aktiv, skal den bindes 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":

实例

/* Animation kode */
@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 Egenskaben definerer, hvor lang tid animationen skal tage at fuldføre. animation-duration Hvis der ikke er defineret en værdi for egenskaben, vil animationen ikke finde sted, da 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% (færdig)) indstillet, 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 færdig 25%, 50% og 100%.

实例

/* Animation kode */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementer, der anvender animation */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

nedenstående eksempel ændrer baggrundsfarve og <div>-elementets position, når animationen er færdig med 25%, 50% og 100%:

实例

/* Animation kode */
@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, der anvender animation */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Forsink animation

animation-delay egenskaben definerer forsinkelsen før animationen starter.

nedenstående eksempel har en forsinkelse på 2 sekunder før animationen starter:

实例

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

亲自试一试

negative værdier er også tilladt. Hvis negative værdier bruges, vil animationen begynde at afspille, som om den allerede har spillet N sekunder.

i nedenstående eksempel vil animationen begynde at afspille, som om den allerede har spillet 2 sekunder:

实例

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

亲自试一试

Indstil hvor mange gange animationen skal køre

animation-iteration-count egenskaben specificerer hvor mange gange animationen skal køre.

nedenstående eksempel kører animationen 3 gange før den stopper:

实例

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

亲自试一试

nedenstående eksempel bruger værdien "infinite" til at få animationen til at fortsætte for evigt:

实例

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

亲自试一试

Reverser eller alternativ animation

animation-direction egenskaben specificerer om animationen skal afspilles fremad, baglæns eller alternativt.

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

  • normal - animation afspiller normalt (fremad). Standardværdi
  • reverse - animation afspiller i den modsatte retning (baglæns)
  • alternate - animation afspiller først fremad og derefter baglæns
  • alternate-reverse - animation afspiller først baglæns og derefter fremad

følgende eksempel vil køre animationen i den modsatte retning (baglæns):

实例

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

亲自试一试

nedenstående eksempel bruger værdien "alternate" til at få animationen til at køre fremad først og derefter baglæns:

实例

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

亲自试一试

nedenstående eksempel bruger værdien "alternate-reverse" til at få animationen til at køre baglæns først og derefter fremad:

实例

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

亲自试一试

Specificer animationshastighedskurven

animation-timing-function Egenskaben definerer animationshastighedskurven.

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

  • ease - Specificer en animation, der starter langsomt, accelererer, og afslutter langsomt (standard)
  • linear - Definer en animation, hvor hastigheden er konstant fra begyndelse til afslutning
  • ease-in - Definer en animation, hvor begyndelsen er langsom
  • ease-out - Definer en animation, hvor afslutningen er langsom
  • ease-in-out - Specificer en animation, hvor begyndelsen og afslutningen er langsomme
  • cubic-bezier(n,n,n,n) - Kør dine egne værdier defineret i tre-beziers funktioner

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

亲自试一试

Specificer animationsfyldningsmønstret

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 overrive dette opførsel.

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

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

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

Dette eksempel viser, hvordan <div>-elementet beholder stilværdier fra den sidste nøgleframe ved 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 Definerer om animationen kører eller pauser.
animation-timing-function Definerer hastighedskurven for animationen.