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

index.html

<!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.

style.css

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

Animáció újraindítása

        <div class="mt-3">
            <button class="btn btn-primary"
            id="startButton">
                Indul
            </button>
        </div>
        <div id="doboz1">a</div>

style.css

#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;    
}