Obsah
Animace jsou efekty jako přechody, ale vylepšené v jejich funkcích, v tom smyslu, že existuje vynikající kontrola nad tím, co lze udělat, díky dostupnosti více možností provádět změny z jednoho stylu do druhého.Vlastnosti animace
Jak jsme již řekli dříve, animace jsou vylepšené přechody vzhledem k počtu možností a vlastností, které nám umožňují mít nad nimi větší kontrolu, každou z nich zkontrolujeme:
- zpoždění animace: Chcete -li spustit animaci, jakmile je aktivována, použijte konkrétní čas.
- směr animace: Určuje, zda se má animace přehrávat pozpátku nebo ve střídajících se cyklech.
- délka animace: Udává časový rozsah, ve kterém by se měla animace hrát.
- počet animací-iterací: Udává, kolikrát se musí animace opakovat, a dokonce může umístit hodnotu nekonečný pro nekonečné opakování téhož.
- název animace: Určuje název animace.
- stav animace: Umožňuje pozastavit animaci a poté pokračovat v přehrávání.
- animation-timing-func: V animaci určete, jak mají být zpracovány mezilehlé hodnoty
- animace: Je to zkratka, pomocí které můžeme začlenit všechny vlastnosti animace do jediné deklarace CSS a má následující strukturu:
Nyní, když známe dostupné vlastnosti, podívejme se na ukázkový kód k jeho analýze:
PříkladExistuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.
V tomto příkladu to vidíme v době provádění : vznášet se na prvek budeme mít zpoždění 100 ms, pak bude mít animace 500 ms na provedení a bude se opakovat nekonečně mnohokrát.
Pak vidíme, že s názvem, kterému jsme dali aplikaci, vlastnost použijeme @klíčové snímky kde vám řekneme, které prvky budou animovány.
Podívejme se, jak by to mělo vypadat v našem prohlížeči:
ZVĚTŠIT
Tím také demonstrujeme důležitost názvu animace, protože funguje jako identifikátor, aby bylo možné ji přiřadit a @klíčové snímky.
Tímto ukončíme tutoriál a tímto jsme již schopni provádět základní animace, abychom našim dokumentům poskytli více pohybu HTML.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
