Kihagyás

6.2. fejezet

Animációk

A CSS lehetőséget biztosít animációk készítésére is. Egy animációt a következő szintaxissal hozhatunk létre:

1
2
3
4
@keyframes animacio_neve {
  from { /* stílus, ami az animáció kezdetén áll fenn */ }
  to { /* stílus, ami az animáció befejezése után áll fenn */ }
}

Ha nem csak az animáció kezdetén és végén fennálló stílust szeretnénk megadni, akkor a from és to helyett megadhatók százalékértékek is. Ezek segítségével részletesebben is testreszabhatjuk egy animáció lefolyását.

1
2
3
4
5
@keyframes animacio_neve {
  0% { /* stílus, ami az animáció kezdetén áll fenn */ }
  50% { /* stílus, ami akkor áll fenn, ha az animáció 50%-ban végrehajtódott */ }
  100% { /* stílus, ami akkor áll fenn, ha az animáció 100%-ban végrehajtódott */ }
}

Ahhoz, hogy egy általunk létrehozott animáció működésbe lépjen, hozzá kell azt társítanunk egy elemhez. Az animálni kívánt elemnek megadható CSS tulajdonságok:

  • animation-name: az animáció neve (ami a @keyframes után szerepel)
  • animation-duration: az animáció hossza
  • animation-timing-function: az animáció időbeli lefolyásának jellemzői
    • a transition-timing-function-nál felsorolt értékek itt is használhatók
  • animation-delay: az animáció kezdete előtti késleltetés hossza
  • animation-iteration-count: hányszor játszódjon le az animáció
    • értékéül megadható egy szám vagy az infinite (végtelen) kulcsszó
  • animation-direction: az animáció iránya
    • normal: az animáció előrefelé lesz lejátszva (alapértelmezett)
    • reverse: az animáció visszafelé lesz lejátszva
    • alternate: az animáció először előrefelé, majd visszafelé lesz lejátszva
  • animation-fill-mode: mi történjen akkor, amikor az animáció éppen nem fut (pl. ha az animáció már befejeződött)
    • forwards: az animált elem a legutolsó képkocka stílusát tartja meg
    • backwards: az animált elem a legelső képkocka stílusát tartja meg
  • a fenti tulajdonságok összevonva is megadhatók: animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode].

Példa: Folyamatosan váltakozó háttérszín, és beúszás effektus megvalósítása animációkkal (A kód kimenete megtekinthető itt)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="hu">
<head>
  <title>Animációk</title>
  <meta charset="UTF-8"/>
  <style>
    @keyframes valtakozo_hatterszin {           /* egy animáció létrehozása */
      0% { background-color: lightcyan; }
      25% { background-color: cyan; }
      50% { background-color: turquoise; }
      75% { background-color: springgreen; }
      100% { background-color: limegreen; }
    }

    @keyframes beuszas {                 /* egy másik animáció létrehozása */
      from { left: -50%; }
      to { left: 50%; transform: translate(-50%); }
    }

    body {
      font-family: sans-serif;
      animation-name: valtakozo_hatterszin;   /* animáció hozzárendelése az elemhez */
      animation-duration: 20s;                /* animáció hossza */
      animation-timing-function: linear;      /* animáció időbeli lefolyása */
      animation-iteration-count: infinite;    /* animáció lejátszásának száma */
      animation-direction: alternate;         /* animáció iránya */
    }

    #content {
      background-color: #fff;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      width: 50%;
      padding: 10px;
      text-align: center;
      position: absolute;
      animation: beuszas 1s linear 0s 1 normal forwards;   /* összevont megadás */
    }
  </style>
</head>
<body>
  <div id="content">
    <h1>Üdvözöllek a weboldalamon!</h1>
    <hr/>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</body>
</html>
Utolsó frissítés: 2024-08-16 16:51:30