< CSS

CSS Animáció

Szerző: Sallai András

Copyright © Sallai András, 2013, 2014, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

A CSS-el létrehozott animációk kevesebb erőforrást igényelnek, mint a JavasScript alapú animációk.

A webkit alapú böngészők külön szelektort igényeltek egy ideig.

Színváltás

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animáció</title> <link href="style.css" rel="stylesheet" /> </head> <body> <p>Animálandó szöveg</p> </body> </html>

Elsőként kitalálunk az animációnak egy nevet. Ez után a @keyframes kulcsszó után leírom a nevet, majd az animációt. A végén az „animacio” tulajdonsággal futtatom az animációt, megadva, mennyi idő alatt kell lefutniuk.

@keyframes anim1 { from { background-color: navy; } to { background-color: yellow; } } p { animation: anim1 5s; }

<iframe width="400" height="100" src="https://szit.hu/p/index.html"></iframe>

Animáció újraindítása

<div class="mt-3"> <button class="btn btn-primary" id="startButton"> Indul </button> </div> <div id="doboz1">a</div>
#doboz1 { background-color: white; width: 20px; height: 150px; } @keyframes valami1 { from { height: 0; } to { height: 150px; } }
startButton.addEventListener('click', () => { doboz1.style.animation = 'none'; doboz1.offsetWidth; doboz1.style.backgroundColor = 'blue'; doboz1.style.animation = 'valami1 4s'; });

Több fázis megadása

@keyframes anim1 { 0% { background-color: navy; } 25% { background-color: yellow; } 50% { background-color: red; } 100% { background-color: green; } } #szoveg { animation: anim1 5s; }

Az animáció tulajdonságai

Beállítás	Leírás
@keyframes	Az animáció megadása
animation	Rövid forma, amelyből hiányzik animation-play-state tulajdonság
animation-name	A @keyframes animáció megadása
animation-duration	Egy ciklus hány másodpercig vagy millimásodpercig tartson.
animation-timing-function	Meghatározzuk az animációt az egész folyamat alatt. Alapértelmezett „ease”.
animation-delay	Ennyit várunk az animáció elkezdéséig. Alapértelmezett: 0.
animation-iteration-count	Hányszor szeretnénk lejátszani a ciklust. Alapértelmezett: 1.
animation-direction	Az animáció fordított lejátszása. Alapértelmezet: „normal”.
animation-play-state	Az animáció fusson, vagy szüneteljen. Alapértelmezés: „running”. Lehet „paused”

Animáció részletei:

@keyframes animacionev {keyframes-szelektor {css-stilus;}}

animacionev - Az animációt valahogy elnevezzük

keyframes-selector - Százalék az animáció ideje alatt

Lehetséges értékei:

0-100%

from (megegyezik a következővel: 0%)

to (megegyezik a következővel: 100%)

css-stilus - Egy vagy több CSS stílusbeállítás

Animáció:

animation: név időtartam időtípus várakozás ismétlés irány;

Az animáció neve:

animation-name: keyframename|none;

Az animáció ideje:

animation-duration: idő;
* alapértelmezés 0, lehet "s" mértékegység: 3s.

Időtípus:

animation-timing-function: érték;

Lehetséges értékek:

linear

az egész animáció sebessége azonos

ease

Alapértelmezés

Az animáció lassan indul, lassan ér véget

ease-in

Lassú indulás

ease-out

Lassan ér véget

ease-in-out

Lassú indulás, lassú vég

cubic-bezier(n,n,n,n)

Saját értékek definiálása

A számok 0 és 1 közötti értékek lehetnek

Várakozás:

animation-delay: idő;

Ismétlések:

animation-iteration-count: value;

n

infinit - végtelen

Irány:

animation-direction: érték;

normal

Alapértelmezett

Normál lejátszás

alternate

Lejátszás visszafele

Státusz:

animation-play-state: paused|running;

Transition

Egyik állapotból másik állapotba megyünk például :hover eseményre.

<div class="egy"></div>
.egy { width: 100px; height: 100px; background-color: navy; transition: width 2s, height 4s; } .egy:hover { width: 300px; height: 300px; }

<div class="egy0015"></div> <style> .egy0015 { width: 100px; height: 100px; background-color: navy; transition: width 2s, height 4s; } .egy0015:hover { width: 300px; height: 300px; } </style>