Tartalomjegyzék

< CSS

CSS Animáció

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

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:

Várakozás: 

animation-delay: idő;

Ismétlések: 

animation-iteration-count: value;

Irány: 

animation-direction: érték;

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