A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Transzformációk és átmenetek /Átmenetek (transition)

Transzformációk és átmenetek
- Átmenetek (transition)

Transzformációk és átmenetek

Átmenetek (transition)

Megjegyzés

Az átmenetek leírását a CSS Transitions dokumentum tartalmazza. Az alábbiakban ezek közül néhány, gyakrabban használt funkciót mutatunk be.

A transition tulajdonság segítségével időben dinamikusan változtathatjuk meg elemeink stílusát azok állapotváltozásai között.

Paraméterek és értékek:

Először adjuk meg azt a CSS tulajdonságot, amit az átmenet érint.
Majd opcionálisan megadhatjuk másodpercben, hogy mennyi időt vegyen igénybe az átmenet. Ha nem adunk meg semmit, 0 másodperc az alapértelmezett érték.
Ezután adjuk meg az átmenet lefolyásának típusát. Ezek a következők lehetnek:
- A cubic-bezier() értéknek négy szám 0 és 1 közötti paramétert adva, Bezier-görbét határozhatunk meg. Ez határozza meg az állapotváltozás lefolyásának intenzitását.
- linear: egyenletes állapotváltást eredményez.
- ease: fokozatosan lassuló állapotváltást eredményez.
- ease-in: gyorsuló állapotváltást eredményez.
- ease-out: lassuló állapotváltást eredményez.
- ease-in-out érték: gyorsuló, majd lassuló állapotváltást eredményez.
Majd opcionálisan megadhatjuk másodpercben, hogy mennyi késleltetéssel induljon az átmenet. Ha nem adunk meg semmit, 0 másodperc az alapértelmezett érték.
- Az értékeket külön-külön is értékül adhatjuk a transition-property, transition-duration, transitiontiming-function és transition-delay funkcióknak.
Vesszővel elválasztva több átmenetet is megadhatunk.

A transition tulajdonság értékei nem öröklődnek.

A tulajdonságot egyszerűen tesztelhetjük például a :hover látszólag osztályt alkalmazva.

Példa - Átmenet példa

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<title>Példa egy átmenetre</title>
<meta charset="utf-8">
<style type="text/css">
figure {
    transition:width 3s ease-in-out, height 3s ease-in-out , background 3s ease-in, color 3s ease-in, transform 5s linear;
     border:4px solid gray;
    display: block;
    width: 200px;
    height: 200px;
    background-color: white;
        font-size:150%;
     background-image:url('http://lorempixel.com/150/150/cats/8/');
     background-repeat:no-repeat;
     background-position:center bottom;
     margin:50px 100px;
}
figure:hover {
    background-color:black;
     color:white;
    width:300px;
    height:200px;
    transform:rotate(10deg);
     border:4px solid green;
     background-image:url('http://lorempixel.com/150/150/cats/8/'), url('http://lorempixel.com/150/150/cats/2/');
     background-repeat:no-repeat,no-repeat;;
     background-position:bottom left, right bottom;
}
</style>
<body>
<figure>
     <figcaption>Húzd ide az egeret</figcaption>
</figure>
</body>
</html>

Magyarázat

A példában a :hover látszólagos osztályt használtuk ki az átmenet bemutatására. Látjuk, hogya figure elemnél definiáltuk, hogy melyik tulajdonságra milyen értékek vonatkozzanak.

A figure:hover szelektornál adtuk meg, hogy milyen tulajdonsága legyen a figure elemnek, ha fölévisszük az egeret. Ebben az esetben megnöveltük a doboz szélességét, még egy háttérképet állítottunk be, és megváltozott a háttér és előtér színe is, miközben a doboz elfordult.

Gyakorlat

Készíts egy tetszőleges menüt, ahol ha a menüpont fölé visszük az egeret, valamilyen átmenetet tapasztalunk!

Kapcsolódó akadálymentességi elvek

Az átmenetek készítése során akár azt is elérhetjük, hogy a tartalom felvillanjon. Ezzel azonban óvatosan bánjunk, mert az epilepsziás felhasználókból rohamot válthat ki.

A WCAG 2.0 szabvány 2.3-as irányelve kimondja:

2.3 Irányelv: Epilepsziás rohamok okozásának elkerülése: Ne tervezzen olyan tartalmat, amiről ismert, hogy rohamokat okozhat

Ha betartjuk a legszigorúbb teljesítési feltételt, miszerint a weboldalak nem jelenítenek meg olyan tartalmat, ami három alkalomnál többször villan fel egy másodperc alatt, akkor megfelelően jártunk el.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.