CSS animation

CSS animation

CSS kan skapa 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 animationer

Tal i tabellen anger den första webbläsarversionen som helt stöder denna 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?

Animationer gör att element gradvis ändrar från en stil till en annan.

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

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

Inkluderar elementets stil 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 animationen ska fungera måste den bindas till ett element.

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

实例

/* Animationens kod */
@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;
}

亲自试一试

Observera:animation-duration Tidsinställningen definierar hur lång tid det tar för animationen att slutföras. Om den inte är specificerad animation-duration Om du inte anger en tidsinställning för animationen kommer den inte att hända, eftersom standardvärdet är 0s (0 sekunder).

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

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%:

实例

/* Animationens kod */
@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;
}

亲自试一试

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

实例

/* Animationens kod */
@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;
}

亲自试一试

Fördröj animation

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

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

实例

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

亲自试一试

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

I följande exempel börjar animationen spela, som om den redan har spelats i 2 sekunder:

实例

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

亲自试一试

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:

实例

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

亲自试一试

Nedanstående exempel gör att animationen fortsätter för evigt med värdet "infinite":

实例

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

亲自试一试

Spela tillbaka animationer i motsatt eller alternativ riktning

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

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

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

Följande exempel körs animationen i motsatt riktning (bakåt):

实例

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

亲自试一试

Nedanstående exempel använder värdet "alternate" för att göra animationen köra framåt först, sedan bakåt:

实例

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

亲自试一试

Nedanstående exempel använder värdet "alternate-reverse" för att göra animationen köra bakåt först, sedan framåt:

实例

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

亲自试一试

Specificera hastighetskurvan för animationen

animation-timing-function Egenskapen specificerar hastighetskurvan för animationen.

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ångsamt
  • cubic-bezier(n,n,n,n) - Kör dina egna värden definierade i en tredje graders Bezier-funktion

Följande exempel visar några av de olika hastighetskurvorna som kan användas:

实例

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

亲自试一试

Specificera fyllningsmodellen för animationen

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

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

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

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

Exempel som låter <div>-elementet behålla stilvärden från den sista nyckelframen vid slutet av 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 Definiera om animationen ska köras eller pausas.
animation-timing-function Definiera animationens hastighetskurva.