animation-name - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti animation-name nastavujeme jméno animace. Pro použití je potřebná základní znalost @keyframes.
Hodnoty
- none (výchozí) - Animace neproběhne (hodnota může být použita k zastavení animace pomocí CSS).
- keyframeNazev - Vlastní název definovaného @keyframes.
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ý div představující kruh o velikosti 100px × 100px, který bude měnit barvy (z červené na černou a poté zpět na červenou). Animaci plnící tento účel si můžeme pojmenovat barvy.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
border-radius: 50%;
animation-name: barvy;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes barvy
{
0%, 100% { background-color: red; }
50% { background-color: black; }
}
</style>
<title>animation-name</title>
</head>
<body>
<div></div>
</body>
</html>Výsledek:
Tento zápis je však dlouhý. Naštěstí se dá zkrátit. Aby však animace fungovala stejně jako předtím, musíme definovat tyto atributy:
- Tento atribut
- animation-duration - Délka animace
- animation-timing-function - Způsob (a rychlost) animace
- animation-delay - Doba před spuštěním animace
- animation-iteration-count - Počet opakování animace
animation: barvy 3s normal 0s infinite;
Č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í!