CSS vo verzií 3 vie rozhýbať niektoré prvky na stránke. Používame na to vlastnosť animate, ktorú napojíme na keyframe. Nie je to až také zložité, ako to vyzerá.
Definujme keyframe
Keyframe definujeme jednoducho pomocou zavináča a kľúčového slova keyframes, po ktorom nasleduje náš vlastný názov animácie.
@keyframes shape {
0% {height: 50px;left:0;}
50% {height: 100px;left: 20%;}
100% {height: 50px;left:0;}
}
V zásade si určíme v percentách animáciu a čo sa ma počas nej diať. Ja som si vyššie určil tri animačné body – 0%, 50% a 100%. Čiže začiatok animácie, stred animácie a koniec animácie. Pokojne si ale môžete určite animačných bodov koľko chcete, najviac 100 (0-100%).
Následne ku každému bodu v animácií je nastavená vlastnosť. Konkrétne týmto keyframom animujem Elementorový shape divider. Robí to také vlnenie, ako uvidíte na konci. To znamená, že nastavím určitú výšku a odsadenie z ľava. Na začiatku a na konci animácie sú tieto hodnoty rovnaké, aby bol pohyb plynulý, inak by medzi animáciami nastával nepríjemný skok. V strede animácie sa výška shapu zvýši na 100px a odsadí sa zľava o 20%.
Prehliadač si to už sám vypočíta, v akom čase má byť aká presná výška, ak by som zadal animačný čas dve sekundy, znamená to, že stred animácie by nastal v čase 1 sekunda. Čiže sekundu po začiatku animácie shape nadobudne 100px výšku a odsadí sa zľava o 20%. Čas od 0-1 sekundu sa obidve tieto hodnoty (height a left) plynule zvyšujú tak, aby v čase 1 sekunda dosiahlo height 100px a left 20%. Ale toto si už vypočítava a rieši prehliadač sám, my to riešiť nemusíme. Pre nás je podstatné, v akom stave bude animácia v bodoch, ktoré sme zadali. Ničím iným sa nemusíme zapodievať.
Definujeme animáciu
No a napokon definujeme animáciu. Musíme sa uistiť, že animáciu spúšťame na správny html element, v mojom prípade ide o element SVG, ktorý sa nachádza v classe .elementor-shape
selector .elementor-shape svg {
animation: shape 3.5s ease-in-out infinite;
width:200%;
}
Šírku som nastavil len preto, lebo pri posuve doprava chýbalo z elementu a nevyzeralo to dobre. Nás však zaujíma najmä hodnota animation:
Tá má štyri vstupné parametre
Názov animácie: V mojom prípade shape – to je to isté magické slovo, ktoré sme zadali v keyframe. Na základe tohto slova prehliadač vie, že má zapnúť animáciu, ktorá je definovaná v keyframe shapes.
Trvanie: Trvanie animácie. Môžeme použiť sekundy, milisekundy, alebo desatinné čísla (pozor, s desatinnou bodkou! ako všade v CSS)
Časovanie animácie: Tu môžeme použiť niekoľko kľúčových slov: linear, ease, ease-in, ease-out, ease-in-out a cubic-bezier(). V podstate to určuje rýchlosť animácie. Linear je lineárna rýchlosť, takže animácia prebieha celý čas lineárne – rovnako rýchlo. Ease, ease-in, out a in-out prebieha parabolicky (začne pomaly, zrýchli sa, v strede dosiahne najvyššiu rýchlosť, potom znova spomaľuje atď). No a cubic-bezier je užívateľský zadaná rýchlosť animácie. Raz vidieť je lepšie ako stokrát počuť – porovnanie tu.
Počet iterácií: Týmto určíme koľkokrát má daná animácia prebehnúť. Môže tam byť buď číslo – animácia prebehne zadaný počet krát, alebo kúzelné slovo infinite – animácia bude prebiehať nekonečno krát (čiže navždy).
Výsledok?
Od krásy 🙂
