animation-timing-function - Český CSS 3 manuál
HTML a CSS Manuál Ostatní vlastnosti animation-timing-function - Český CSS 3 manuál
Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.
Pomocí CSS 3 vlastnosti animation-timing-function nastavujeme rychlostní křivku animace. Můžeme si také vytvořit svoji vlastní.
Hodnoty
- ease (výchozí) - Animace začíná pomalu, poté zrychlí a ke konci je pomalejší.
- ease-in - Animace má pomalý začátek a rychlý konec.
- ease-out - Animace má rychlý začátek a pomalý konec.
- ease-in-out - Animace nabývá obou předešlých hodnot - má pomalý začátek a pomalý konec.
- linear - Animace má celou dobu stejnou rychlost.
- cubic-bezier(číslo, číslo, číslo, číslo) - Vlastní nastavení rychlostní křivky animace. Hodnota číslo musí nabývat hodnoty 0-1. Můžeme využít na vytváření tento nástroj.
Ukázka
Vytvořme si jednoduchý div o velikosti 100px × 100px, který bude představovat kruh se světle modrou barvou. Ten se bude neustále posouvat dokola (1 celé proběhnutí animace trvá 4 sekundy). Vytvoříme mu však vlastní rychlostní křivku, která je podobná hodnotě ease, akorát je rychlejší.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #B6E3EA;
position: absolute;
animation: animace 4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0, 0.7, 0.6, 1);
}
@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-timing-function</title>
</head>
<body>
<div></div>
</body>
</html>Výsledek:
Minulý zápis si však můžeme zkrátit hlavním atributem animace - animation. Abychom však mohli zápis zkrátit, musíme definovat následující atributy:
- animation-name - Jméno animace
- animation-duration - Délka animace
- Tento atribut
- animation-delay - Doba před spuštěním animace
- animation-iteration-count - Počet opakování animace
animation: animace 4s cubic-bezier(0, 0.7, 0.6, 1) 0s infinite;
Komentáře
Zatím nikdo nevložil komentář - buď první!