animation-delay - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-delay nastavujeme dobu před začátkem animace. Můžeme tak určit za jak dlouho se animace spustí. Pokud se animace opakuje, čeká se jen jednou.
Hodnoty
- 0 (výchozí) - Animace začíná ihned.
- čas - Nastavitelná doba v sekundách (s) nebo milisekundách (ms).
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 jednoduchý modrý div o rozměrech 100px × 100px s posuvnou animací, která se spustí po 4 sekundách.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 100px;
top: 100px;
animation: animace 5s linear;
animation-delay: 4s;
}
@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-delay</title>
</head>
<body>
<div></div>
</body>
</html>Výsledek:
Kvůli animaci s pozicemi si nastavme i defaultní pozici, aby div byl před začátkem na stejné pozici, kde animace končí a i začíná.
Minulý zápis animace si můžeme zkrátit na následující podobu, protože doba před začátkem animace je jako 4. vlastnost atributu animation. Předešlé atributy jsou:
- animation-name - Jméno animace
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
animation: animace 5s linear 4s;
Článek pro vás napsal Jan Lupčík
Autor se primárně věnuje vývoji webových stránek a aplikacích 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í!