CSS animaties

CSS animaties

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

CSS

In dit hoofdstuk zult u leren over de volgende eigenschappen:

  • @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 effectief te maken, 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 geleidelijk 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 stijlverandering ingesteld wanneer deze verandert door gebruik te maken van de sleutelwoorden "from" en "to" (die respectievelijk 0% (begin) en 100% (einde) vertegenwoordigen).

U kunt ook percentages gebruiken. Door percentages te gebruiken, kunt u zo veel stijlveranderingen toevoegen als u wilt.

Het volgende voorbeeld zal de achtergrondkleur van het <div>-element wijzigen 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 wijzigt 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;
}

亲自试一试

Vertragen 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 deze al N seconden heeft gespeeld.

In het volgende voorbeeld begint de animatie alsof deze 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 deze stopt:

实例

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

亲自试一试

Hieronder wordt een voorbeeld gegeven waarbij de waarde "infinite" wordt gebruikt om de animatie oneindig voort te zetten:

实例

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

亲自试一试

Achterwaarts of wisselend laten lopen van de animatie

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 een voorbeeld gegeven waarbij de waarde "alternate" wordt gebruikt 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 een voorbeeld gegeven waarbij de waarde "alternate-reverse" wordt gebruikt 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 langzaam, vervolgens versnelt en tenslotte langzaam afbreekt (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 driemaal bijkomende functie

De volgende voorbeelden tonen enkele van de verschillende snelheidscurven 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 vullen van de animatiemodus

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 overwegen.

Bij het niet afspelen van de animatie (voor het begin, na het einde, of beide einde momenten),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 van de laatste keyframe (afhankelijk van de animation-direction en de animation-iteration-count).
  • backwards - Het element krijgt de stijlwaarden van de eerste keyframe (afhankelijk van de animation-direction) en behoudt deze waarde gedurende de animatiedelays.
  • both - De animatie volgt zowel de voorwaartse als de achterwaartse regels, waardoor de animatie-eigenschappen in beide richtingen worden uitgebreid.

Dit voorbeeld laat zien hoe 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 Stelt in of de animatie moet draaien of stil blijven.
animation-timing-function Stelt de snelheidskromme van de animatie in.