Efekti v CSS

CSS omogoča premikanje, vrtenje, raztezanje, nagibanje in animiranje elementov. S tem lahko spremenimo videz in položaj elementa brez uporabe JavaScripta. Pri sodobnem oblikovanju najpogosteje uporabljamo tri skupine lastnosti: transform, transition in animation.

Te lastnosti so uporabne za poudarke, prehode med stanji, vizualni odziv uporabniškega vmesnika in zmerne dekorativne učinke. Pri njih pa moramo paziti, da ne zmanjšajo preglednosti, dostopnosti ali uporabnosti strani.

Osnovna pravila

• transform spremeni položaj, obliko ali velikost elementa.
• transition določa, kako se neka sprememba izvede skozi čas.
• animation in @keyframes omogočata večstopenjsko samodejno animacijo.
• Vizualni učinki morajo biti smiselni in ne smejo oteževati uporabe strani.
• Pri animacijah moramo upoštevati tudi dostopnost in uporabniške nastavitve.

2D in 3D transformacije

Z lastnostjo transform lahko element premaknemo, zavrtimo, povečamo, zmanjšamo ali nagnemo. Transformacija spremeni koordinatni prostor elementa, vendar sama po sebi ne vpliva na tok dokumenta tako, kot bi ga na primer spremenila lastnost margin.

Najpogostejše 2D metode so:

• translate() – premikanje po osi x in y
• rotate() – vrtenje elementa
• scale() – povečanje ali zmanjšanje elementa
• skewX() in skewY() – nagibanje elementa
• matrix() – združena oblika več 2D transformacij

Med pogostejše 3D metode spadajo:

• rotateX() – vrtenje po osi x
• rotateY() – vrtenje po osi y
• rotateZ() – vrtenje po osi z
• translateZ() – premik po osi z
• perspective – določa občutek globine pri 3D prikazu

<div class="osnova">ORIGINAL</div>
<div class="premik">PREMAKNJEN</div>
<div class="rotacija">ROTIRAN</div>
<div class="povecava">ZMANJŠAN</div>
<div class="nagib">NAGNJEN</div>

.premik {
   transform: translate(100px, 30px);
}
.rotacija {
   transform: rotate(-10deg);
}
.povecava {
   transform: scale(0.8);
}
.nagib {
   transform: skewX(-30deg);
}

Primer 3D transformacije

Pri 3D transformacijah je pogosto smiselno dodati tudi lastnost perspective, saj tako učinek globine postane bolj viden.

.ovoj {
   perspective: 700px;
}
.element-3d {
   transform: rotateY(35deg);
}

Tranzicije

Tranzicija omogoča, da se sprememba lastnosti izvede postopno v določenem času. Najpogosteje jo uporabimo v kombinaciji s psevdorazredom :hover, lahko pa tudi pri spremembi razreda ali stanja elementa.

Za osnovni učinek običajno potrebujemo vsaj določitev lastnosti, ki se spreminja, in trajanje prehoda.

Tranziciji lahko določimo še:

• transition-property – določi lastnost, ki se spreminja
• transition-duration – določi trajanje prehoda
• transition-delay – določi zakasnitev začetka
• transition-timing-function – določi hitrostni potek prehoda

Primer prehoda, kjer se ob premiku miške spremeni širina elementa:

<div id="transition">TRANZICIJA</div>

#transition {
   width: 150px;
   height: 70px;
   background-color: rgba(249,171,2,0.75);
   text-align: center;
   line-height: 70px;
   border-radius: 5px;
   transition: width 2s ease;
}

#transition:hover {
   width: 400px;
}

Tranzicija lahko hkrati spreminja tudi več lastnosti:

#transition2 {
   transition: transform 0.8s ease, background-color 0.8s ease;
}

#transition2:hover {
   transform: translateX(40px) scale(1.08);
   background-color: rgba(249,140,2,0.95);
}

Animacije

Animacije omogočajo večstopenjske učinke, ki se lahko izvajajo samodejno, v zanki ali samo enkrat. Osnova animacije je pravilo @keyframes, kjer določimo posamezna stanja animacije.

@keyframes

V pravilu @keyframes določimo:

• ime animacije,
• ključne točke, na primer 0%, 50% in 100%,
• CSS lastnosti za posamezna stanja.

@keyframes prosojnost {
   0%   { opacity: 1; }
   100% { opacity: 0; }
}

Enak učinek lahko zapišemo tudi z from in to:

@keyframes prosojnost {
   from { opacity: 1; }
   to   { opacity: 0; }
}

animation

Lastnost animation poveže element z animacijo iz @keyframes. Uporabimo lahko posamezne lastnosti ali krajši zapis.

• animation-name – ime animacije
• animation-duration – trajanje animacije
• animation-delay – zakasnitev začetka
• animation-iteration-count – število ponovitev
• animation-timing-function – hitrostni potek
• animation-direction – smer izvajanja
• animation-fill-mode – obnašanje pred začetkom ali po koncu

.element {
   animation-name: animacija;
   animation-duration: 4s;
   animation-delay: 1s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-direction: alternate;
}

Krajši zapis iste animacije:

.element {
   animation: animacija 4s 1s infinite linear alternate;
}

Primer animacije, kjer se kvadrat spremeni v krog, se zavrti in spremeni barvo:

<div id="animation">ANIMACIJA</div>

#animation {
   width: 150px;
   height: 150px;
   background: rgba(249,171,2,0.15);
   text-align: center;
   line-height: 150px;
   animation: square-to-circle 2s 1s infinite alternate;
}

@keyframes square-to-circle {
   0% {
      border-radius: 0;
      background: rgba(249,171,2,0.15);
      transform: rotate(0deg);
   }
   100% {
      border-radius: 50%;
      background: rgba(249,171,2,1);
      transform: rotate(180deg);
   }
}

Še primer animacije s premikom in prosojnostjo:

#animation2 {
   animation: premik-utrip 3s ease-in-out infinite alternate;
}

@keyframes premik-utrip {
   0% {
      transform: translateX(0);
      opacity: 1;
   }
   50% {
      transform: translateX(80px);
      opacity: 0.6;
   }
   100% {
      transform: translateX(160px);
      opacity: 1;
   }
}

Priporočila

• Transformacije, tranzicije in animacije uporabljaj z jasnim namenom.
• Za manjše odzive uporabniškega vmesnika so pogosto dovolj tranzicije.
• Za večstopenjske učinke uporabi animacije z dobro določeno časovno zasnovo.
• Pri 3D učinkih preveri, ali so še vedno pregledni in razumljivi.
• Pri animacijah upoštevaj tudi uporabnike, ki želijo manj gibanja.

Pogoste napake

• Lastnosti transform, transition in animation se zamenjujejo med seboj.
• Tranziciji ni določeno trajanje, zato učinka ni mogoče opaziti.
• Animacija je preveč izrazita in moti uporabo strani.
• Pri 3D učinku ni ustrezno določena perspektiva.
• Ne upošteva se nastavitev za zmanjšano gibanje.