A Webfejlesztés blokk oldala

Tartalom

Bevezető
1. Miért animálunk?
Alapok
1. Böngésző optimalizálás
2. Transform
Kétállapotú animációk
1. Transition
Többállapotú animációk
1. Keyframes
2. Animation
Egy konkrét példa
Zárszó

Bevezető

Röviden és egyszerűen a CSS animációkkal lehetőségünk van HTML elemek stílusának fokozatos változtatására. Az üzleti weboldalakon ezek az animációk jellemzően nem annyira szembetűnőek, ennek ellenére nagyban hozzájárulnak a felhasználói élmény növeléséhez. Ha valaki viszont igazán elmélyedik a CSS animációkban, akkor olyan remekműveket is létrehozhat, mint például az 30 species, 30 pieces. Tudom ajánlani az oldal böngészését az animációktól függetlenül is, mert a tartalma is igazán érdekes.

Miért animálunk?

Tulajdonképpen összességében az előbb is említett felhasználói élmény növelése a célunk, ugyanis a (jól alkalmazott) animációk többek közt képesek:

az idő telését lerövidíteni várakozáskor (pl.: megerősítés, betöltés)
jobb kontextust adni, amikor a tartalom/oldal megváltozik
a felhasználó figyelmét irányítani
önmagukban dizájnelemek lenni, amikkel a felhasználói felület használata sokkal nagyobb élmény lesz a felhasználó számára

Csakhogy egy példával is szemléltessem (kattints a gombokra):

Please wait...

Your account has been successfully created!

Please wait...

Your account has been successfully created!

Alapok

Mielőtt elkezdenénk az animálásról beszélni, szükséges a HTML elemek transzformálásáról szót ejteni. Transzformálni 2D-ben és 3D-ben is lehet: én itt a 2D esetet és azon belül is csak 3 legfontosabbnak tartott transzformációt mutatom be, az érdeklődők számára a teljes lista megtalálható itt. Arról, hogy ezek egyáltalán miért fontosak, majd később lesz szó.

Böngésző optimalizálás

Még mielőtt beleugranánk, szükséges megemlítenem, hogy mint sok máshol a webfejlesztésben, itt is gondolnunk kell a böngésző optimalizálásra, amennyiben egy szélesebb közönség számára készítjük az oldalunkat. Arra is felhívom a figyelmet, hogy én a könnyebb átláthatóság érdekében ezzel nem fogok bajlódni a bemutató alatt, hogy minden előtagot minden tulajdonsághoz odaírok.

Amennyiben viszont valakinek szüksége lenne rá, vannak nagyszerű eszközök az interneten, ahova csak be kell másolni a CSS kódunkat és automatikusan minden kellő előtag hozzá lesz adva ahhoz. Továbbá nem árt a Can I use? oldalt is nézegetni ilyen esetben.

Transform

A HTML elemeket a transform tulajdonságukkal tudjuk átalakítani. Lehetséges értékei közül én a translate (mozgatás), scale (kicsinyítés/nagyítás) és rotate (forgatás) működését fogom a következőkben bemutatni.

Translate

HTML elemeket az X és az Y tengelyen tudunk elmozdítani: ennek megfelelően léteznek a transalteX() és translateY() értékeink. Mindkettőnek egy paramétert kell megadnunk, mégpedig az eltolás mértékét. Ez többek közt megadható px, em, in-ben vagy százalékban. Én itt és a dokumentum hátralevő részében is px-t fogok használni, mert ez a leggyakrabban előforduló megoldás. A pozitív érték az X tengelyen jobbra, az Y tengelyen lefele, a negatív érték az X tengelyen balra, az Y tengelyen felfele tolja az elemet.

               
   #translateX-right-example:hover {
      transform: translateX(120px);
   }

               
   #translateX-left-example:hover {
      transform: translateX(-120px);
   }

               
   #translateY-down-example:hover {
      transform: translateX(120px);
   }

               
   #translateY-up-example:hover {
      transform: translateX(-120px);
   }

Ha mindkét tengelyen szeretnénk eltolni, akkor a translateX() és a translateY() képességét egyesíti a translate() érték. Két paramétere közül első az X tengelyen, a második az Y tengelyen való eltolás mértéke.

               
   #translate-example:hover {
      transform: translate(200px, 60px);
   }

Megjegyzés: ha valamit már eltoltunk translate-tel és például egy pszeudo osztállyal újra eltolnánk, akkor a második eltolás az eredeti pozícióhoz (eltolás előttihez) képes történik (de ez a gyakorlatban jellemzően nem kéne, hogy számítson, mert alap pozíciót nem állítunk a transform tulajdonsággal).

               
   #translate-2-example {
      transform: translateX(100px);
   }
   #translate-2-example:hover {
      transform: translateY(-100px);
   }

Scale

Hasonlóan a translate tulajdonsághoz, kicsinyíteni/nagyítani is az X és Y tengelyen tudunk: ennek megfelelően vannak scaleX() és scaleY() értékeink. A szükséges paraméter egy szám, amely ha 0 és 1 között van, akkor kicsinyíti, ha 1-nél nagyobb, akkor nagyítja az elemet. A két értéket egyesíti a scale() érték: első paramétere az X tengelyen, a második az Y tengelyen való kicsinyítés/nagyítás mértéke. Amennyiben a két paraméter megegyezik, elég egyszer megadni.

               
   #scaleX-scaleY-example:hover {
      transform: scaleX(2);
   }

               
   #scaleY-example:hover {
      transform: scaleY(2);
   }

               
   #scale-example:hover {
      transform: scale(2.2, 2.8);
   }

A fentiekben bemutatottak fontos tulajdonsága, hogy nem csak a HTML elem szélességét és magasságát változtatják, hanem az elem minden tulajdonságát. Az alábbi példán jól látszik, hogy az elem font-size tulajdonságának értéke ugyanúgy megduplázódik.

               
   #scale-font-sizeexample:hover {
      transform: scale(2);
   }

EGY BESZÉLŐ DIV

Rotate

A rotate() értékkel HTML elemeket tudunk forgatni. Egy paramétere a forgatás mértékét adja meg, ez történhet többek közt a következő mértékegységekkel: deg, rad, turn (1 turn = 360deg = 400grad, 1rad = 180/pi deg). Pozitív érték esetén órájárással megegyező, negatív érték esetén órajárással ellentétes irányban történik a forgatás.

               
   #rotate-clockwise-example:hover {
      transform: rotate(135deg);
   }

               
   #rotate-counterclockwise-example:hover {
      transform: rotate(-45deg);
   }

Transform-origin

Az előbb bemutatott transzformációkkal kapcsolatban felmerülhet egy fontos kérdés: mégis melyik ponthoz viszonyítva tolja/nagyítja/kicsinyíti/forgatja el a böngésző az elemeket? Alapértelmezetten a középső ponthoz képest történnek a transzformációk, de igény esetén ezt megváltoztathatjuk a transform-origin tulajdonsággal. Megadhatunk egy konkrét pontot többek közt két koordinátával (X, Y), százalékosan és előre meghatározott értékekkel (top, left, right, bottom, center)

               
   #transform-origin-with-coordinates-example {
      transform-origin: 0 50px;
      /* 0 0 a bal felső sarok, 
         ehhez képest 50px-vel eltolva
         az Y tengelyen kezdi a transzformációt.*/
      
   }
   
   #transform-origin-with-coordinates-example:hover {
      transform: scale(2);
   }

               
   #transform-origin-with-percentages-example {
      transform-origin: 50% 100%; 
      /* 0% 0% a bal felső sarok,
         ehhez képest választjuk ki 
         az alsó-középső pontot. */
   }
   
   #transform-origin-with-percentages-example:hover {
      transform: rotate(30deg);
   }

               
   #transform-origin-with-keyword-example {
      transform-origin: right; 
      /* A forgatást viszonyítási
         pontja a "jobb oldal" közepe. */
   }
   
   #transform-origin-with-keyword-example:hover {
      transform: rotate(60deg);
   }

               
   #transform-origin-with-keywords-example {
      transform-origin: right bottom; 
      /* A forgatás viszonyítási
         pontja a jobb alsó pont. */
   }
   
   #transform-origin-with-keywords-example:hover {
      transform: rotate(100deg);
   }

Felülírás

Az előbbiekkel kapcsolatosan még fontos megemlíteni, hogy az ugyanarra az elemre alkalmazott transform tulajdonságok felülírják egymást. Ha egy elemet több módon szeretnénk transzformálni, akkor azt egyszerre kell deklarálni, szóközökkel elválasztva.

               
   #transform-overwrite-example:hover {
      transform: translate(150px, 20px); /* Ez felül lesz írva. */
      transform: scale(2);
   }

               
   #transform-overwrite-example:hover {
      transform: translate(150px, 20px) scale(2); /* Mindkettő alkalmazva lesz. */
   }

Kétállapotú animációk

A következőkben elkezdünk animálni és ezen belül először a kétállapotú animációkról lesz szó: olyan animációk, amelyeknek van egy meghatározott kezdő- és végállapota. E két állapot között a kívánt értékek fokozatosan változnak egy megadott időtartamon belül. Az alábbiakban tárgyalt tulajdonságokat mindig az HTML elem tulajdonságai között kell definiálni és az elemnél definiált állapotváltozások (pl. pszuedo osztályok: :hover, :focus, :active) végállapotának bekövetkezését szabályozzák. Fontos, hogy a animálni kívánt tulajdonság a kezdő és a végső állapotban is definálva legyen. (Sok tulajdonság értéke öröklődik vagy van alapértelmezett értéke így ez nem mindig szükségesszerűen explicit.)

Transition

Transition-duration

A transition-duration tulajdonság megadja, hogy mennyi idő teljen el a kezdő- és végállapot között. Értéke megadható s és ms mértékegységben.

               
   #transition-duration-example {
      transition-duration: 2s;
   }
   
   #transition-duration-example:hover {
      transform: translate(150px, 0);
   }

Egy másik példa a :focus használatával.

               
   #transition-duration-focus-example {
      resize: none;
      display: block;
      background-color: snow;
      width: 80%;
      transition-duration: 5s;
   }
   
   #transition-duration-focus-example:focus {
      width: 10%;
   }

Transition-property

A transition-property tulajdonsággal megadható, hogy melyik tulajdonságokat szeretnénk animálni. A kívánt tulajdonságneveket vesszővel választjuk el. Alapértelmezett értéke az all.

               
   #transition-property-example {
      background-color: purple;
      border: 1px solid black;
   
      transition-duration: 3s;
      transition-property: background-color, border;
   }
   
   #transition-property-example:hover {
      /* Animált. 3 másodperc alatt. */
      background-color: ghostwhite;
      border: 10px solid black;

      /* Nem animált. Rögtön bekövetkezik. */
      opacity: 0.5;
   }

A transition-property tulajdonság sajátosságaiból az is következik, hogy a különböző transzformációkra csak egy szabály lehet érvényes. Azaz vagy animáljuk az összes transzformációt vagy egyiket sem.

               
   #transition-property-transform-example {
      background-color: purple;
      border: 1px solid black;
   
      transition-duration: 3s;
      transition-property: background-color, border, transform; 
         /* Nem specifikálható, hogy csak a rotate
         vagy a scale legyen animálva.
         Mindkettő avagy egyik sem. */
   }
   
   #transition-property-transform-example:hover {
      /* Animált. 3 másodperc alatt.*/
      background-color: ghostwhite;
      border: 10px solid black;
      transform: rotate(180deg) scale(2);
   
      /* Nem animált. Rögtön bekövetkezik.*/
      opacity: 0.5;
   }

Transition-delay

A transition-delay tulajdonsággal az átmenetet kezdését késleltethetjük. Értékét megadhatjuk s, illetve ms-ben. Alapértelmezett értéke 0.

               
   #transition-delay-example {
      transition-duration: 2s;
      transition-property: background-color, border, transform;
      transition-delay: 2s; /* 2 másodperces késleltetés. */
   }
   
   #transition-delay-example:hover {
      transform: rotate(90deg);
   }

Különböző tulajdonságoknak megadhatunk különböző animáció időket és késleltetéseket.

               
   #transition-duration-property-delay-example {
      background-color: orange;
      border: 1px solid black;
      opacity: 0.2;
   
      /* Háttérszín 500ms alatt megy át 0 késleltetéssel;
         Szegély 2s alatt megy át 1s késleltetéssel;
         Átlátszóság 5s alatt megy át 2s késleltetéssel. */
      transition-property: background-color, border, opacity;
      transition-duration: 500ms, 2s, 5s;
      transition-delay: 0, 1s, 2s;
   }
   
   #transition-duration-property-delay-example:hover {
      background-color: snow;
      border: 3px dashed lightblue;
      opacity: 1;
   }

Transition-timing-function

A transition-timing-function tulajdonság az animáció gyorsulását adja meg. Az alapvető kulcsszavas értékei lehetnek: linear (alapértelmezett), ease, ease-in, ease-out, ease-in-out. Jelentésük dióhéjban:

linear: Nincs gyorsulás, az átmenet egyenletes sebességgel zajlik.
ease: Az átmenet feléig fokozatos gyorsulás, utána a végéig fokozatos lassulás.
ease-in: Az átmenet lassan indul el, majd a végéig fokozatosan gyorsul.
ease-out: Az átmenet gyorsan indul el, majd fokozatosan a végéig lassul.
ease-in-out: Az átmenet lassan indul el, majd felgyorsul, a végén újra lelassul.

               
   #transition-timing-function-example {
         transition-duration: 3s;
         transition-timing-function: linear;
   }
   
   #transition-timing-function-example:hover {
         transform: translate(300px, 0);
   }

További komplexebb lehetőségekért lehet a hivatalos dokumentációt böngészni. Egyéni timing-function készítő: Ceaser. Kicsit bonyolultabb előre elkészített időzítők: easings.net.

Transition

A fentieket a transition tulajdonsággal lehet egy sorban rövidíteni. Az értékeket a következőképpen szoksásos megadni: [property] [duration] [timing-function] [delay]. A sorrend valamennyire flexibilis, az igazán lényeges, hogy az első megadott időérték lesz a transition-duration érteke, a második pedig a transition-delay értéke. A kihagyott tulajdonságok az alapértelmezett értékeiket fogják felvenni.

               
   #transition-example {
      background-color: snow;
      width: 75px;
      height: 75px;
   
      transition: all 4s ease 0.1s;
   }
   
   #transition-example:hover {
      background-color: purple;
      width: 300px;
      height: 150px;
   }

Amennyiben különböző tulajdonságokhoz különböző átmenet szabályt akarunk rendelni, akkor ezeket vesszővel választjuk el.

               
   #transition-2-example {
      background-color: snow;
      width: 75px;
      height: 75px;
   
      transition: background-color 1s ease 0.1s,
                  width 0.3s ease-in-out 1s,
                  height 0.3s ease-in-out 1.3s;
   }
   
   #transition-2-example:hover {
      background-color: purple;
      width: 300px;
      height: 150px;
   }

Teljesítmény

Ezek után felmerülhet egy fontos kérdés: mégis mely HTML elemeket tudjuk animálni? A rövid és tömör válasz az az, hogy nagyjából mindent (teljes lista). Azonban még ennél lényegesebb kérdés, hogy mit éri meg teljesítmény szempontjából animálni. Ez a lista már sokkal rövidebb és itt jön képbe az anyag elején tárgyalt transform tulajdonság és annak fontossága. Teljesítmény szempontjából olcsón animálni a következőket lehet:

transform: translate()
transform: rotate()
transform: scale()
opacity

Egy részletes cikk ennek miértjéről itt található, de megpróbálom a lényeget itt is kiemelni. A böngésző vízesés szerűen építi fel az oldalt, tehát minden előző számítás alapja lesz a következőknek. Ebből következik, hogy minél korábban kiszámított értékeket változtatunk animálással, annál több értéket kell a böngészőnek újraszámolnia. A fent említett 4 tulajdonság pedig a lap felépítésének utolsó szakaszában kerül kiszámításra, így változtatásukkal nem kell sok plusz számítást elvégezni a böngészőnek.

A fenti szabály nem kőkemény, inkább csak egy iránymutató, amit jó fejben tartani, főleg, ha az oldalunk sok animációt tartalmaz.

Többállapotú animációk

Az előbbiekben két állapot közötti átmenetet tudtuk szabályozni és animációvá alakítani. Lehetőségünk van azonban több közbenső állapotot is definálni és ezáltal komplexebb animációkat létrehozni.

Keyframes

Először az animáció menetét írjuk le a @keyframes kulcsszóval.

A @keyframes kulcsszó után szükséges az animáció nevét megadni, utána pedig önkényesen kiválasztott időpillanatokban (a teljes animációidő százalékával) megadhatjuk az elem állapotát.

            
   @keyframes rainbowBox {
      0% {
         background-color: red;
      }
      25% {
         background-color: orange;
      }
      50% {
         background-color: yellow;
      }
      75% {
         background-color: green;
      }
      100% {
         background-color: blue;
      }
   }

Ha tehát a teljes animáció mondjuk 4s-ig tart, akkor a fentiek alapján a háttérszín:

kezdő állapota piros
pirosból 1s alatt átmegy narancsba
narancsból 1s alatt átmegy sárgába
sárgából 1s alatt átmegy zöldbe
zöldből 1s alatt átmegy kékbe

Animation

Most, hogy van egy animációnk, csak annyi a teendőnk, hogy ezt hozzákötjük egy elemhez.

Az elem tulajdonságai között az alábbiakat kell elsősorban megadnunk:

animation-name: a kapcsolni kívánt animáció neve
animation-duration: az animáció hossza
animation-iteration-count: hányszor játszódjon le az animáció (megadható az infinite kulcsszó is)

            
   #animation-example {
      animation-name: rainbowBox;
      animation-duration: 4s;
      animation-iteration-count: infinite;
   }
   
   @keyframes rainbowBox {
      0% {
         background-color: red;
      }
      25% {
         background-color: orange;
      }
      50% {
         background-color: yellow;
      }
      75% {
         background-color: green;
      }
      100% {
         background-color: blue;
      }
   }

A korábbiakban már látott késleltetést és gyorsulást is állíthatjuk az animation-delay és az animation-timing-function tulajdonságokkal.

Animation-direction

Alapértelmezetten az animáció a 0%-tól halad a 100%-ig. Ez módosítható az animation-direction tulajdonsággal. Lehetséges értékei:

forward: 0%-tól 100%-ig halad (alapértelmezett)
reverse: 100%-tól 0%-ig halad
alternate: 0%-tól 100%-ig, majd 100%-tól 0%-ig

               
   #animation-duration-example {
      animation-name: movingBox;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
   }
   
   @keyframes movingBox {
      25% {
            transform: translate(100px, 0);
      }
      50% {
            transform: translate(100px, 100px);
      }
      75% {
            transform: translate(0, 100px);
      }
      100% {
            transform: translate(0, 0);
      }
   }

Animation-fill-mode

Az animation-fill-mode tulajdonsággal az elem állapotát kontrollálhatjuk az animáció előtt és után. Lehetséges értékei:

none: az animáció után az elem a kezdő állapotát veszi fel
forwards: az animáció során bekövetkezett változások megmaradnak
backwards: a 0%-os állapot rögtön alkalmazva lesz az elemre, a késleltetés csak ezután jön
both: forwards és backwards is érvényes

               
   #animation-fill-mode-example {
      /* animation-name: movingBox2; JS-vel van hozzáadva. */
      animation-duration: 4s;
      animation-iteration-count: 1;
      animation-delay: 1s;
      animation-fill-mode: both;
      
      background-color: yellow;
   }
   
   @keyframes movingBox2 {
      0% {
            background-color: lightblue;
      }
      25% {
            transform: translate(100px, 0);
      }
      50% {
            transform: translate(100px, 100px);
      }
      75% {
            transform: translate(0, 100px);
      }
      100% {
            transform: translate(0, 0);
            background-color: purple;
      }
   }

Animation-play-state

Az animation-play-state tulajdonsággal az animáció folyását szüneteltethetjük, állíthatjuk vissza.

paused: az animáció szünetel
running: az animáció fut
initial: az animációt a kezdeti állapotra állítja vissza

               
   #animation-play-state-example {
      animation-name: movingBox3;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-play-state: running;
   }
   
   #animation-play-state-example:hover {
      animation-play-state: paused;
   }
   
   @keyframes movingBox3 {
      0% {
   
      }
      75% {
            transform: translate(150px, 0);
      }
      100% {
            transform: translate(150px, 100px);
      }
   }

Ez a tulajdonságot jellemzően JavaScripten keresztül érdemes módosítani.

Animation

A fenti tulajdonságokat egy sorban is megadhatjuk az animation tulajdonsággal. Két dologra kell figyelni:

a sorrendben az előbb megadott szám lesz az animation-duration, az utóbbi animation-delay értéke
az anmáció neve ne egyezzen meg semmilyen kulcsszóval

Az előbbi példa refaktorálva:

               
   #animation-play-state-example {
      animation: movingBox3 3s infinite running;
   }
   
   #animation-play-state-example:hover {
      animation-play-state: paused;
   }
   
   @keyframes movingBox3 {
      0% {
   
      }
      75% {
            transform: translate(150px, 0);
      }
      100% {
            transform: translate(150px, 100px);
      }
   }

Egy konkrét példa

A következő rövid példában az alábbi lenyíló doboz elkészítését mutatom meg, amely jelen esetben egy híres felfedezőről ad további információt, amennyiben a felhasználó a kurzort a dobozra viszi.

Frederick Banting

Sir Frederick Grant Banting kanadai orvos. 1923-ban J.J.R. Macleoddal megosztva orvostudományi Nobel-díjban részesült az inzulin felfedezéséért. A számtalan cukorbeteg életét megmentő (ha nem is gyógyító) felfedezés azonnali szenzációt keltett és a Nobel-díj Bizottság az az évi orvostudományi díjat fele-fele arányban megosztva Bantingnak és Macleodnak ítélte. Banting (aki ekkor csak 31 éves volt, amivel máig a legfiatalabb orvosi Nobel-díjas) a pénzjutalom felét Bestnek adta, Macleod pedig az ő részét Collippal osztotta meg. Az ontariói kormány 7500 dolláros évjáradékot szavazott meg Bantingnak és a Torontói Egyetem kinevezte orvoskutatói professzorának (a tisztséget az ő számára hozták létre). A négy kutató úgy döntött, hogy bár ezzel valószínűleg nagy vagyonról mondanak le, nem szabadalmaztatják az inzulint, hogy a gyógyszer minél előbb és minél elérhetőbb áron kerüljön a betegekhez.

Először is elkészítjük az alap HTML struktúrát és megformázzuk az elemeket.

         
   <div> class="header">[Híres felfedező neve]
      <p class="content">[Szöveg]</p>
   </div>

         
   .header {
      color: white;
      background-color: tomato;
      padding: 10px 20px;
      margin: auto;
      width: 60%;
      min-width: 400px;
      font-size: 30px;
      font-weight: bold;
   }
   
   .content {
      background-color: peachpuff;
      color: black;
      font-size: 20px;
      font-weight: normal;
      padding: 15px 10px;
   }

[Híres felfedező neve]

[Szöveg]

Amennyiben a kurzor a .header fölé kerül, meg kell változtatnunk a .content class valamely tulajdonságait. Ilyesfajta kiválasztást itt én még nem tárgyaltam, de rövid guglizás után rátalálhatunk, hogy mivel a .content a .header közvetlen leszármazottja, ezért a következőképpen kell eljárnunk:

         
   .header:hover .content {
      /* .content stílusának változtatása,
         amennyiben a kurzor
         a .header fölé kerül */ 
   }

Először megoldjuk a szöveg megjelenítését. Ezt az opacity tulajdonsággal fogjuk megtenni.

         
   .content {
      background-color: peachpuff;
      color: black;
      font-size: 20px;
      font-weight: normal;
      padding: 15px 10px;
   
      opacity: 0;
      transition: opacity 0.5s;
   }
   
   .header:hover .content {
      opacity: 1;
      transition: opacity 1s;
   }

Frederick Banting

Alakul.

A kurzor rávitelénél és elvitelénél különböző időtartamokat szeretnék, ezért amikor a :hover bekövetkezik felülírom a transition tulajdonságot. Picit több erről itt.

Legvégül a .content height tulajdonságát kell csak meganimálni. Kényelmes lenne a height: 0 -ról height: auto -ra animálni (a szövegünk végig ott van az oldalon elrejtve, tehát a böngésző ki tudja számolni a height tartalomtól függő "optimális" értékét), de mint számomra is kiderült ezzel akadnak problémák. Egy fix értéket meg értelemszerűen nem lenne jó megadni, így kis guglizás után itt találtam megoldást a problémára. Röviden a max-height tulajdonságot használhatjuk és egy olyan értéket adunk meg neki, amekkora az elemünk biztos nem lesz. Én itt 1000px-t használtam.

         
   .header {
      color: white;
      background-color: tomato;
      padding: 10px 20px;
      margin: auto;
      width: 60%;
      min-width: 400px;
      font-size: 30px;
      font-weight: bold;
   }
   
   .content {
      background-color: peachpuff;
      color: black;
      font-size: 20px;
      font-weight: normal;
      padding: 15px 10px;
      
      opacity: 0;
      max-height: 0;
      transition: max-height 0.35s ease-out 0.5s,
                  opacity 0.5s;
   }
   
   .header:hover .content {
      opacity: 1;
      max-height: 1000px;
      transition: max-height 0.75s ease,
                  opacity 1s ease 0.75s;
   }

Frederick Banting

A két transition-nél megadtam egy-egy késleltetést, hogy szépen egymás után következzenek az animációk.

Zárszó

Ezzel a végére is értünk ennek a bemutatónak. Összességében az animálás egy nagyon erős eszköz az oldalunk barátságosabbá és modernebbé tételére, azonban fontos, hogy ésszel használjuk, mert könnyen ellentétes hatást tudunk elérni vele.

A bemutatót készítette: Schin András Bence

Az oldal tetejére

A Webfejlesztés blokk honlapja

CSS Animációk

Tartalom

Bevezető

Miért animálunk?

Alapok

Böngésző optimalizálás

Transform

Translate

Scale

Rotate

Transform-origin

Felülírás

Kétállapotú animációk

Transition

Transition-duration

Transition-property

Transition-delay

Transition-timing-function

Transition

Teljesítmény

Többállapotú animációk

Keyframes

Animation

Animation-direction

Animation-fill-mode

Animation-play-state

Animation

Egy konkrét példa

Zárszó