Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:css:css_animacio

< CSS

CSS Animáció

  • Szerző: Sallai András
  • Copyright © Sallai András, 2013, 2014
  • Licenc: GNU Free Documentation License 1.3

Bevezetés

Az animáció támogatása nem százszázalékos, de használható. Mindamellett 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ényelnek.

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 leírjuk kitalálunk az animációnak egy nevet. Ez után a @keyframes kulcsszó után leírom 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;	
	}
}
@-webkit-keyframes anim1 {
	from {
		background-color: navy;	
	}
	to {
		background-color: yellow;	
	}
}
p {
	animation: anim1 5s;
	-webkit-animation: anim1 5s;
}

Több fázis megadása

@keyframes anim1 {
   0% {
	background-color: navy;	
   }
   25% {
 	background-color: yellow;	
   }
   50% {
		background-color: red;   
   }
   100% {
		background-color: green;   
   }
}
@-webkit-keyframes anim1 {
   0% {
	background-color: navy;	
   }
   25% {
	background-color: yellow;	
   }
   50% {
	background-color: red;   
   }
   100% {
	background-color: green;   
   }
}
 
#szoveg {
   animation: anim1 5s;
   -webkit-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;
oktatas/web/css/css_animacio.txt · Utolsó módosítás: 2019/08/22 19:38 szerkesztette: admin