CSS animace
CSS animace
CSS umožňuje animaci prvků HTML bez použití JavaScriptu nebo Flashe!
V této kapitole se dozvíte o následujících vlastnostech:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Podpora prohlížeče pro animace
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
| Property | |||||
|---|---|---|---|---|---|
| @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 |
Co jsou to CSS animace?
Animace umožňuje prvku postupně přecházet z jednoho stylu do druhého.
Můžete změnit tolik vlastností CSS, kolikrát chcete.
Chcete-li použít animaci CSS, musíte nejprve určit některé klíčové snímky pro animaci.
Klíčové snímky obsahují styly, které bude mít prvek v určitých časech.
Pravidlo @keyframes
Když v pravidle určíte styly CSS @keyframes
, animace se v určitých časech postupně změní z aktuálního stylu na nový.
Aby animace fungovala, musíte ji svázat s prvkem.
Následující příklad spojuje animaci "example" s prvkem <div>. Animace bude trvat 4 sekundy a postupně změní barvu pozadí prvku <div> z „červené“ na „žlutou“:
Příklad
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Poznámka: Vlastnost animation-durationdefinuje, jak dlouho by měla trvat dokončení animace. Pokud animation-durationvlastnost není zadána, nedojde k žádné animaci, protože výchozí hodnota je 0 s (0 sekund).
Ve výše uvedeném příkladu jsme specifikovali, kdy se styl změní, pomocí klíčových slov „od“ a „do“ (což představuje 0 % (začátek) a 100 % (úplný)).
Je možné použít i procenta. Pomocí procent můžete přidat tolik změn stylu, kolik chcete.
Následující příklad změní barvu pozadí prvku <div>, když je animace dokončena z 25 %, z 50 % a znovu, když je animace dokončena na 100 %.
Příklad
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Následující příklad změní barvu pozadí i polohu prvku <div>, když je animace dokončena z 25 %, z 50 % a znovu, když je animace dokončena na 100 %.
Příklad
/* The animation code */
@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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Zpoždění animace
Vlastnost animation-delayurčuje zpoždění pro začátek animace.
Následující příklad má 2 sekundové zpoždění před spuštěním animace:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Jsou povoleny i záporné hodnoty. Při použití záporných hodnot se animace spustí, jako by již N sekund hrála.
V následujícím příkladu se animace spustí, jako by se již přehrávala 2 sekundy:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Nastavte, kolikrát se má animace spustit
Vlastnost animation-iteration-counturčuje, kolikrát se má animace spustit.
Následující příklad spustí animaci 3krát, než se zastaví:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Následující příklad používá hodnotu „infinite“, aby animace pokračovala navždy:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Spusťte animaci v opačném směru nebo v střídavých cyklech
Tato animation-directionvlastnost určuje, zda se má animace přehrávat vpřed, vzad nebo v alternativních cyklech.
Vlastnost animation-direction může mít následující hodnoty:
normal- Animace se přehraje normálně (dopředu). Toto je výchozí nastaveníreverse- Animace se přehrává v opačném směru (zpět)alternate- Animace se přehraje nejprve dopředu a poté zpětalternate-reverse- Animace se přehraje nejprve zpět a poté vpřed
Následující příklad spustí animaci v opačném směru (zpět):
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
Následující příklad používá hodnotu "alternate", aby se animace spustila nejprve dopředu a poté zpět:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
V následujícím příkladu je použita hodnota "alternate-reverse", aby se animace spustila nejprve zpět a poté vpřed:
Příklad
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Určete rychlostní křivku animace
Vlastnost animation-timing-functionurčuje rychlostní křivku animace.
Vlastnost animation-timing-function může mít následující hodnoty:
ease- Určuje animaci s pomalým začátkem, pak rychle a pomalu končí (toto je výchozí)linear- Určuje animaci se stejnou rychlostí od začátku do konceease-in- Určuje animaci s pomalým startemease-out- Určuje animaci s pomalým koncemease-in-out- Určuje animaci s pomalým začátkem a koncemcubic-bezier(n,n,n,n)- Umožňuje definovat své vlastní hodnoty ve funkci kubických-bezierových
Následující příklad ukazuje některé z různých rychlostních křivek, které lze použít:
Příklad
#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;}
Určete režim výplně pro animaci
Animace CSS neovlivňují prvek před přehráním prvního klíčového snímku nebo po přehrání posledního klíčového snímku. Vlastnost animation-fill-mode může toto chování potlačit.
Vlastnost animation-fill-modeurčuje styl pro cílový prvek, když se animace nepřehrává (před jejím začátkem, po jejím skončení nebo obojí).
Vlastnost animation-fill-mode může mít následující hodnoty:
none- Výchozí hodnota. Animace nebude aplikovat žádné styly na prvek před nebo po jeho spuštěníforwards- Prvek si zachová hodnoty stylu, které jsou nastaveny posledním klíčovým snímkem (závisí na směru animace a počtu iterací animace)backwards- Prvek získá hodnoty stylu, které jsou nastaveny prvním klíčovým snímkem (závisí na směru animace), a uchová je během období zpoždění animaceboth- Animace se bude řídit pravidly pro dopředu i dozadu a rozšíří vlastnosti animace v obou směrech
Následující příklad umožňuje prvku <div> po skončení animace zachovat hodnoty stylu z posledního klíčového snímku:
Příklad
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Následující příklad umožňuje prvku <div> získat hodnoty stylu nastavené prvním klíčovým snímkem před zahájením animace (během období zpoždění animace):
Příklad
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Následující příklad umožňuje prvku <div> získat před začátkem animace hodnoty stylu nastavené prvním klíčovým snímkem a po skončení animace zachovat hodnoty stylu z posledního klíčového snímku:
Příklad
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Vlastnost animace
Níže uvedený příklad používá šest vlastností animace:
Příklad
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Stejného efektu animace jako výše lze dosáhnout pomocí vlastnosti zkratky
animation:
Příklad
div
{
animation: example 5s linear 2s infinite alternate;
}
Vlastnosti animace CSS
Následující tabulka uvádí pravidlo @keyframes a všechny vlastnosti animace CSS:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |