CSS Animaties

CSS Animaties

CSS kan HTML-elementen animaties geven zonder JavaScript of Flash te gebruiken!

CSS

In dit hoofdstuk zult u de volgende eigenschappen leren:

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

Browserondersteuning voor animaties

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

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

Wat is CSS-animatie?

Animaties laten elementen geleidelijk van de ene stijl veranderen naar de andere stijl.

U kunt willekeurig een onbeperkt aantal CSS-eigenschappen wijzigen.

Om CSS-animaties te gebruiken, moet u eerst enkele keyframes specificeren voor de animatie.

De keyframes bevatten de stijl die het element op een specifieke tijd heeft.

@keyframes-regel

Als u in @keyframes De regels specificeren de CSS-stijlen, en de animatie verandert geleidelijk van de huidige stijl naar de nieuwe stijl op een specifieke tijd.

Om de animatie te activeren, moet deze worden gebonden aan een element.

Het volgende voorbeeld bindt de "example"-animatie aan het <div>-element. De animatie duurt 4 seconden en verandert de achtergrondkleur van het <div>-element van "rood" naar "geel":

实例

/* Animatiecode */
@keyframes example {
  from {achtergrondkleur: rood;}
  to {achtergrondkleur: geel;}
}
/* Pas de animatie toe op dit element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Let op:animation-duration De eigenschap definieert hoeveel tijd nodig is om de animatie te voltooien. Als deze niet is gespecificeerd animation-duration Als de waarde van de eigenschap 0s (0 seconden) is, zal de animatie niet plaatsvinden omdat de standaardwaarde 0s is.

In het bovenstaande voorbeeld hebben we de verandering van stijl ingesteld wanneer deze moet veranderen door gebruik te maken van de sleutelwoorden "from" en "to" (die respectievelijk 0% (begin) en 100% (voltooiing) vertegenwoordigen).

U kunt ook percentagewaarden gebruiken. Door percentages te gebruiken, kunt u naar behoefte zoveel stijlveranderingen toevoegen als u wilt.

Het volgende voorbeeld wijzigt de achtergrondkleur van het <div>-element wanneer de animatie 25%, 50% voltooid is en de animatie 100% voltooid is:

实例

/* Animatiecode */
@keyframes example {
  0%   {achtergrondkleur: rood;}
  25% {achtergrondkleur: geel;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementen die de animatie toepassen */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Het volgende voorbeeld verandert de achtergrondkleur en de positie van het <div>-element wanneer de animatie 25%, 50% en 100% is voltooid:

实例

/* Animatiecode */
@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;}
}
/* Elementen die de animatie toepassen */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

Vertraging van de animatie

animation-delay De eigenschap bepaalt de vertragingstijd voordat de animatie begint.

Het volgende voorbeeld heeft een vertraging van 2 seconden voordat de animatie begint:

实例

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

亲自试一试

Negatieve waarden zijn ook toegestaan. Als negatieve waarden worden gebruikt, begint de animatie alsof het al N seconden heeft gespeeld.

In het volgende voorbeeld begint de animatie alsof het al 2 seconden heeft gespeeld:

实例

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

亲自试一试

Instellen van het aantal keren dat de animatie moet worden uitgevoerd

animation-iteration-count De eigenschap specificeert het aantal keren dat de animatie moet worden uitgevoerd.

Het volgende voorbeeld laat de animatie 3 keer lopen voordat het stopt:

实例

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

亲自试一试

Hieronder wordt de voorbeeldgebruik van de waarde "infinite" getoond om de animatie oneindig door te laten gaan:

实例

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

亲自试一试

Animatie in tegengestelde of wisselende richting uitvoeren

animation-direction De eigenschap specificeert of de animatie voorwaarts, achterwaarts of in wisselende richting moet worden afgespeeld.

animation-direction De eigenschap accepteert de volgende waarden:

  • normal - De animatie speelt normaal af (voorwaarts). Standaardwaarde
  • reverse - De animatie speelt in de tegengestelde richting (achterwaarts) af
  • alternate - De animatie speelt eerst voorwaarts af, en vervolgens achterwaarts
  • alternate-reverse - De animatie speelt eerst achterwaarts af, en vervolgens voorwaarts

Het volgende voorbeeld laat de animatie in de tegengestelde richting (achterwaarts) lopen:

实例

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

亲自试一试

Hieronder wordt de voorbeeldgebruik van de waarde "alternate" getoond om de animatie eerst voorwaarts te laten lopen, en vervolgens achterwaarts:

实例

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

亲自试一试

Hieronder wordt de voorbeeldgebruik van de waarde "alternate-reverse" getoond om de animatie eerst achterwaarts te laten lopen, en vervolgens voorwaarts:

实例

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

亲自试一试

Specificeer de snelheidskromme van de animatie

animation-timing-function De eigenschap bepaalt de snelheidskromme van de animatie.

animation-timing-function De eigenschap accepteert de volgende waarden:

  • ease - Specificeer een animatie die begint met een langzame start, vervolgens versnelt en uiteindelijk langzaam afneemt (standaard)
  • linear - Bepaal een animatie met dezelfde snelheid van begin tot einde
  • ease-in - Bepaal een animatie met een langzame start
  • ease-out - Bepaal een animatie met een langzame finish
  • ease-in-out - Specificeer een animatie met een langzamere start en finish
  • cubic-bezier(n,n,n,n) - Definieer je eigen waarden in de drievoudige Bezier-functie

De volgende voorbeelden tonen enkele van de verschillende snelheidskrommen die je kunt gebruiken:

实例

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

亲自试一试

Specificeer het vulmodel van de animatie

CSS-animaties beïnvloeden het element niet voordat de eerste keyframe wordt afgespeeld of na het afspelen van de laatste keyframe.animation-fill-mode kan de eigenschap dit gedrag overwinnen.

Bij het niet afspelen van de animatie (voor het begin, na het einde, of beide einde eindigen),animation-fill-mode De eigenschap bepaalt de stijl van het doel-element.

De animation-fill-mode-eigenschap accepteert de volgende waarden:

  • none - Standaardwaarde. De animatie past geen stijlen toe op het element voordat of na het uitvoeren.
  • forwards - Het element behoudt de stijlwaarden die zijn ingesteld door de laatste keyframe (afhankelijk van animation-direction en animation-iteration-count).
  • backwards - Het element neemt de stijlwaarden aan die zijn ingesteld door de eerste keyframe (afhankelijk van de animation-direction) en behoudt deze waarde gedurende de animatiedelay.
  • both - De animatie volgt zowel de voorwaartse als de achterwaartse regels, waardoor de animatie-eigenschappen in beide richtingen worden uitgebreid.

Dit voorbeeld laat zien dat de <div> element de stijlwaarden van de laatste keyframe behoudt aan het einde van de animatie:

实例

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 Bepaal of de animatie moet draaien of stoppen.
animation-timing-function Bepaal de snelheidskromming van de animatie.