Animáció
Animálandó szöveg
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;
}
===== Animáció újraindítása =====
a
#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.
.egy {
width: 100px;
height: 100px;
background-color: navy;
transition: width 2s, height 4s;
}
.egy:hover {
width: 300px;
height: 300px;
}