CSS je jedním z nejúčinnějších způsobů, jak zajistit, aby byla webová stránka interaktivní. Transformuje vzhled a dojem z našeho základu webová stránka. Jednou z důležitých a vzrušujících funkcí, které CSS nabízí, je to, že nám umožňuje provádět animace. Umožňuje nám přesouvat prvky na naší stránce. Začněme Cestu animací v CSS v následujícím pořadí:
Animace v CSS
Přidávání animací na náš web je skvělý způsob, jak upoutat pozornost uživatelů. To nejen přidává hodnotu naší stránce, ale také obohacuje uživatelský komfort. Animace v CSS je postavena na dvou částech. Oni jsou
- Klíčové snímky
- Animace
Animace CSS jsou podporovány ve všech prohlížečích. Některé starší prohlížeče, například Safari (až do verze 8.0), však k interpretaci vlastností animace vyžadují předponu (-webkit-). Například:
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% -webkit-animation-name: cssanim / * old browsers * / -webkit-animation-duration: 5s / * old browsers * / animation -name: cssanim animation-duration: 5s} / * old browsers * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Můžeme použít ukázkovou html stránku shora a nahradit CSS kód ve značce stylu pro vyzkoušení dalších příkladů.
Klíčové snímky v CSS
Toto je stavební blok animací v CSS. Slouží k definování konkrétních okamžiků a stylů animace na naší webové stránce. Jinými slovy, když zadáme @keyframes uvnitř našeho CSS, získá ovládací prvek k úpravě aktuálního stavu do nového stavu nebo animaci objektů po určitou dobu.
co je zablokování v Javě
@Keyframes musí mít určité vlastnosti pro ovládání animace, jako je název animace, fáze a vlastnosti.
název - Každá animace musí obsahovat název, který popisuje její chování.
Fáze - Fáze představuje dokončení animace. Lze to označit buď klíčovým slovem „do“ a „od“ nebo jako procento, zatímco 0% představuje počáteční stav a 100% představuje koncový stav animace. Výhodou použití procentuální reprezentace je, že můžeme definovat několik mezilehlých fází mezi nimi, tj. Jaké by mělo být chování animace na 50% fázi nebo 75% atd.
Vlastnosti - Tyto vlastnosti nám dávají kontrolu nad @keyframes, abychom s nimi během animace manipulovali.
.anim {výška: 200px šířka: 200px pozadí: poloha světle modrá: relativní poloměr ohraničení: 100% název animace: cssanim doba trvání animace: 5s} @keyframes cssanim {0% {transformace: měřítko (0,5) krytí: 0} 50 % {transformace: scale (1.5) neprůhlednost: 1} 100% {transformace: scale (1)}}Nyní, když máme jasno v definování klíčových snímků. Prozkoumejme vlastnosti animace, abychom popsali, jak animovat naše prvky a objekty. Dvě vlastnosti, tj. Inherit a initial, lze použít se všemi typy animací. Tyto vlastnosti se obecně používají spolu se značkou div k vykazování odlišného chování.
počáteční: Nastaví tuto vlastnost na výchozí hodnotu.
zdědit: Zdědí tuto vlastnost z nadřazeného prvku.
Vlastnosti animace
- název animace
Určuje název animace, která se používá v @keyframes k manipulaci.Možné hodnoty jsou:
- název: Toto určuje název, který se má vázat na klíčový snímek pro animaci.
- žádný: Toto je výchozí hodnota a lze ji použít k přepsání zděděných nebo kaskádových animací.
Syntax:
název animace: název | žádný | počáteční | zdědit
.anim {výška: 200px šířka: 200px pozadí: poloha světle modrá: relativní poloměr ohraničení: 100% název animace: cssanim doba trvání animace: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- trvání animace
Určuje čas, za který animace dokončí jedno provedení. Je definována v sekundách nebo milisekundách (např. 4 s nebo 400 ms). Výchozí hodnota této vlastnosti je 0 s, takže pokud tato vlastnost není zadána, animace se neprovede.
Syntax:
animation-duration: time
.anim {výška: 200 pixelů šířka: 200 pixelů pozadí: modrá pozice: relativní poloměr ohraničení: 100% název animace: cssanim doba trvání animace: 4s} @keyframes cssanim {0% {transformace: měřítko (0,4) krytí: 0} 50 % {transformace: scale (1.4) neprůhlednost: 1} 100% {transformace: scale (1)}}- zpoždění animace
Vlastnost animation-delay nám umožňuje určit zpoždění animace. Definuje, kdy se spustí sekvence animace.
Hodnotu této vlastnosti lze deklarovat buď v sekundách nebo milisekundách (ms). Může obsahovat kladné i záporné hodnoty. Kladná hodnota označuje, že animace se spustí po uplynutí zadaného času a do té doby zůstane unimimovaná. Na druhou stranu záporná hodnota okamžitě spustí animaci z bodu, jako by se již prováděla po zadaný časový rámec.
Syntax:
animation-delay: time
.anim {výška: 200px šířka: 200px pozadí: světle modrá poloha: relativní poloměr ohraničení: 100% název animace: cssanim doba trvání animace: 4s zpoždění animace: 4s} @keyframes cssanim {0% {vlevo: 0px} 100% {left: 250px}}- počet animací-iterací
Tato vlastnost označuje, kolikrát by se měla přehrát sekvence animace. Výchozí hodnota této vlastnosti je 1.Možné hodnoty jsou:
- číslo - označuje počet iterací
- nekonečný - označuje, že animace by se měla opakovat navždy
Syntax:
počet animací-iterace: číslo | nekonečný
.anim {výška: 200px šířka: 200px pozadí: světle modrá poloha: relativní poloměr ohraničení: 100% název animace: cssanim animace-doba trvání: 2 s animace-iterace-počet: 4} @keyframes cssanim {0% {vlevo: 0px} 100% {left: 100px}}- směr animace
Definuje směr animace. Směr prvku lze nastavit tak, aby hrál vpřed, vzad nebo v alternativních cyklech.Výchozí hodnota této vlastnosti je normální a při každém cyklu se resetuje.Možné hodnoty jsou:
normální - Toto je výchozí chování a animace se přehraje dopředu. Po každém cyklu se animace dostane do původního stavu a znovu se přehraje dopředu
zvrátit - Animace se přehrává dozadu. Po každém cyklu se animace dostane do koncového stavu a bude přehrána dozadu
střídat - Směr animace je obrácený, tj. Při každém cyklu hraje nejprve dopředu a potom dozadu. Každý lichý cyklus vykresluje dopřednou animaci a každý sudý cyklus zpětný pohyb.
alternativní zpátečka - Směr animace je střídavě obrácen. Zde se animace nejprve přehrává dozadu a poté dopředu v každém cyklu. Každý lichý cyklus se pohybuje vzad nebo vzad a každý sudý cyklus vykresluje dopředu animaci.
Syntax:
směr animace: normální | zpět |alternativní | alternativní zpátečka
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- funkce časování animace
Tato vlastnost určuje křivku rychlosti nebo styl pohybu animace. Přiřazuje se k tomu, aby se hladce provedla změna stylu animace z jednoho formuláře do druhého. Pokud není přiřazena žádná hodnota, je výchozí pro usnadnění.Možné hodnoty pro funkci časování animace jsou:
ulehčit - Toto je výchozí hodnota vlastnosti. Zde začíná animace pomalu, uprostřed se postupně zrychluje a pak zase pomalu končí.
lineární - Animace udržuje stejnou rychlost během celého cyklu, tj. Od začátku do konce.
ulehčení - Animace začíná pomalu.
uvolnění - Animace končí pomalu.
bezstarostnost - Animace se pohybuje pomalu jak na začátku, tak na konci.
kubický-bezier (n, n, n, n) - Tato pokročilá funkce nám umožňuje vytvořit vlastní časovací funkci definováním vlastních hodnot. Možné hodnoty se pohybují od 0 do 1.
Syntax:
funkce časování animace: lineární | snadnost | uvolnění | usnadnění | bezstarostnost |kubický-bezier (n, n, n, n)
.anim {výška: 200px šířka: 200px pozadí: světle modrá poloha: relativní poloměr ohraničení: 100% název animace: cssanim doba trvání animace: 2s směr animace: vzad} @keyframes cssanim {0% {pozadí: oranžová vlevo: 0px } 50% {pozadí: žlutá vlevo: 200 pixelů nahoře: 200 pixelů} 100% {pozadí: modrá vlevo: 100 pixelů}}- režim animace-vyplnění
Toto je speciální vlastnost, protože určuje styl animace před nebo po přehrání animace.Ve výchozím nastavení není styl elementu ovlivněn animací před začátkem nebo po jeho skončení. Tato vlastnost je užitečná, protože pomáhá při přepsání tohoto výchozího chování animace.Následující vlastnosti jsou možné pro vlastnost animation-fill-mode:
žádný - Toto je výchozí hodnota vlastnosti, tzn. Styly animace se neaplikují na prvek, před nebo po animaci.
vpřed - Styly jsou zachovány prvkem v konečné sekvenci animace, tj. Po dokončení animace.
zpět - Styly jsou zachovány prvkem v počáteční sekvenci animace, tj. Před spuštěním animace, zejména během zpoždění animace.
Jak převést dvojité na int
oba - To znamená, že animace bude následovat ve směru, tj. Dopředu i dozadu
Syntax:
animation-fill-mode: none | vpřed | vzad | oba
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-duration: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { animation-timing-function: easier} # anim2 {animation-timing-function: linear} # anim3 {animation-timing-function: easier-in} # anim4 {animation-timing-function: easier-out} # anim5 {animation- funkce časování: easy-in-out} @keyframes cssanim {od {left: 0px} do {left: 400px}}- stav animace-play
Tato vlastnost určuje animaci, která bude ve stavu přehrávání nebo pozastavení. Když se animace obnoví z pozastavení, začne také od místa, kde odešla.Možné hodnoty jsou:
- hraní - Chcete-li vykreslit animaci v provozu
- pozastaveno - Vykreslení animace ve stavu pozastavení.
Syntax:
stav animace-přehrávání: pozastaveno | hraní
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animace
Toto je známé jako vlastnost zkratky animace. Používá se pro čistší kód. Jakmile si zvykneme na všechny vlastnosti animace, doporučuje se použít zkratku animace pro rychlejší kódování a definování všech vlastností v jednom řádku.
Syntax:
animace: [název-animace] | [trvání animace] | [funkce časování animace] |[zpoždění animace] | [počet animací-iterací] | [směr animace] |[animation-fill-mode] | [stav animace-přehrávání]
Všechny efekty animace, které zobrazujeme výše pomocí různých vlastností animace, lze dosáhnout pomocí zkratkyanimace vlastnictví.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Tím se uzavírají všechny vlastnosti animace, které lze použít v CSS. Měli bychom vyzkoušet různé varianty těchto vlastností, abychom získali jasnější obraz. Když to uděláme pohodlně, vlastnost zkratky animace může být velkou pomocí při psaní čistšího a rychlejšího kódu. Toto je jedna z důležitých dovedností, které je třeba se naučit v CSS pro webové vývojáře. Protože máme tendenci se více soustředit na pohybující se objekty než na statické, mohou nám animace pomoci toho dosáhnout a také vyvinout skvělé pozoruhodné webové stránky.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Máte na nás dotaz? Uveďte to prosím v sekci komentářů blogu „Animace v CSS“ a my se vám ozveme.