animation-fill-mode - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-fill-mode nastavujeme co se děje s elementem, když je animace pozastavená (když skončí nebo čeká na začátek).
Hodnoty
- none (výchozí) - Po skončení (nebo před začátkem) je element s animací na místě, kde je umístěn v HTML.
- forwards - Po skončení animace zůstává element na pozici, kde zastavil.
- backwards - Když je nastaveno animation-delay, element čeká na začátek animace na místě, kde také animace začíná.
- both - Nastaví se obě předchozí hodnoty.
Ukázka
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Vytvořme si červený čtverec o velikosti 100px × 100px s posuvnou animací trvající 3 sekundy a s čekáním na začátek animace 4 sekundy. Když se animace nebude přehrávat, bude na místě, kde animace končí a v tomto případě i začíná (hodnota both).
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: animace 3s linear 4s;
animation-fill-mode: both;
}
@keyframes animace
{
0%, 100% { left: 100px; top: 100px; }
25% { left: 250px; top: 100px; }
50% { left: 250px; top: 250px; }
75% { left: 100px; top: 250px; }
}
</style>
<title>animation-fill-mode</title>
</head>
<body>
<div></div>
</body>
</html>Výsledek:
Minulý zápis animace si můžeme zkrátit, abychom měli vše krásně přehledně. Pro zkrácení zápisu však musíme ještě nejdříve definovat tyto atributy:
- animation-name - Jméno animace
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
- animation-delay - Doba před spuštěním animace
- animation-direction - Směr (a rychlost) animace
animation: animace 3s linear 4s normal both;
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Komentáře
Zatím nikdo nevložil komentář - buď první!