CSS animace

Obsah

Zobrazit obsah

CSS animace

CSS umožňuje animaci prvků HTML bez použití JavaScriptu nebo Flashe!

CSS

V této kapitole se dozvíte o následujících vlastnostech:

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

Podpora prohlížeče pro animace

Čísla v tabulce určují první verzi prohlížeče, která tuto vlastnost plně podporuje.

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

Klíčové snímky obsahují styly, které bude mít prvek v určitých časech.

Pravidlo @keyframes

Když zadáte styly CSS uvnitř @keyframes animace se postupně změní z aktuálního stylu na nový styl v určitých časech.

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 bude se postupně měnit barva pozadí prvku <div> od „červené“ po „ž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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Poznámka: Vlastnost animation-duration definuje, jak dlouho má trvat dokončení animace. Pokud není specifikována vlastnost animation-duration, nedojde k žádné animaci, protože výchozí hodnota je 0s (0 sekund).

Ve výše uvedeném příkladu jsme specifikovali, kdy se změní styl použitím klíčová slova „od“ a „do“ (což představuje 0 % (zahájení) a 100 % (úplné)).

Je možné použít i procenta. Pomocí procent můžete přidat tolik styl se mění, jak chcete.

Následující příklad změní barvu pozadí prvku <div> prvek, 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Následující příklad změní barvu pozadí i polohu prvku <div> prvek, 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Zpoždění animace

Vlastnost animation-delay určuje zpoždění začátku 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

Jsou povoleny i záporné hodnoty. Pokud používáte záporné hodnoty, animace se spustí, jako by se již hrálo N sekund.

V následujícím příkladu se animace spustí, jako by již byla hrát 2 sekundy:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

Nastavte, kolikrát se má animace spustit

Vlastnost animation-iteration-count urč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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

Následující příklad používá k vytvoření animace hodnotu "nekonečno". pokračovat navždy:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Spusťte animaci v opačném směru nebo v střídavých cyklech

Vlastnost animation-direction určuje zda se má animace přehrávat vpřed, vzad nebo střídavě cykly.

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ět
alternate-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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

Následující příklad používá k vytvoření animace hodnotu "alternate". běžte nejprve dopředu, pak dozadu:

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

Následující příklad používá k vytvoření animace hodnotu "alternate-reverse". běžte nejprve dozadu, pak dopředu:

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

Určete rychlostní křivku animace

Vlastnost animation-timing-function urč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 konce
ease-in: - Určuje animaci s pomalým startem
ease-out: - Určuje animaci s pomalým koncem
ease-in-out: - Určuje animaci s pomalým začátkem a koncem
cubic-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;}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

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

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

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-mode specifikuje a styl pro cílový prvek, když se animace nepřehrává (před ní začíná, po skončení nebo obojí).

Vlastnost animation-fill-mode může mít následující hodnoty:

none: - Výchozí hodnota. Animace nepoužije na prvek žádné styly před ani 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 zachová si je během období zpoždění animace
both: - 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> zachovat hodnoty stylu z poslední klíčový snímek, když animace končí:

Příklad

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Následující příklad umožňuje prvku <div> získat hodnoty stylu nastavené parametrem první klíčový snímek 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;
  }

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

Následující příklad umožňuje prvku <div> získat sadu hodnot stylu o první klíčový snímek před zahájením animace a zachovat hodnoty stylu od posledního klíčového snímku, kdy animace končí:

Příklad

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

Stejného efektu animace jako výše lze dosáhnout použitím zkratky Vlastnost animace:

Příklad

div
{
    animation: example 5s linear 2s infinite alternate;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

Vlastnosti animace CSS

Následující tabulka uvádí pravidlo @keyframes a všechny vlastnosti animace CSS:

@keyframes: Určuje kód animace
animation: Zkrácená vlastnost pro nastavení všech vlastností animace
animation-delay: Určuje zpoždění pro začátek animace
animation-direction: Určuje, zda se má animace přehrávat vpřed, vzad nebo ve střídavých cyklech
animation-duration: Určuje, jak dlouho by animace měla trvat, než dokončí jeden cyklus
animation-fill-mode: Určuje styl pro prvek, když se animace nepřehrává (před začátkem, po skončení nebo obojí)
animation-iteration-count: Určuje, kolikrát se má animace přehrát
animation-name: Určuje název animace @keyframes
animation-play-state: Určuje, zda je animace spuštěna nebo pozastavena
animation-timing-function: Určuje rychlostní křivku animace