Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_animacio

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

oktatas/web/css/css_animacio.txt · Utolsó módosítás: 2023/02/09 22:24 szerkesztette: admin