Efekti v CSS

CSS3 omogoča premikanje, rotacijo in raztegovanje elementov. S tranformacijo elementu lahko spremenimo obliko, velikost in pozicijo. Tranzicija omogoča, da transformacije izvedemo tekoče in v določenem času, izdelamo pa lahko tudi animacije.

2D in 3D transformacije

CSS3 podpira 2D in 3D transformacije s katerimi elementom spreminjamo obliko, velikost in pozicijo.

Metode za 2D transformacijo:

• translate() - omogoča premikanje elementov iz trenutne pozicije po x in y osi
• rotate() - omogoča rotacijo elementa v smeri urinega kazalca ali v obratni smeri s podajanjem stopinj
• scale() - omogoča raztegovanje ali krčenje elementov po širini in višini
• skewX() in skewY() - omogoča nagibanje elementa po x in y osi s podajanjem stopinj
• matrix() - omogoča izvedbo vseh 2D transformacij naenkrat. Ima 6 parametrov, ki z matematičnimi funkcijami omogočajo rotacijo, raztegovanje, premikanje in nagibanje elementov

Metode za 3D transformacijo:

• rotateX() - omogoča 3D rotacijo elementa po x osi s podajanjem stopinj
• rotateY() - omogoča 3D rotacijo elementa po y osi s podajanjem stopinj
• rotateZ() - omogoča 3D rotacijo elementa po z osi s podajanjem stopinj
• več o 3D transforacijah na w3school.com

<div id="original">ORIGINAL</div>
<div id="translate">PREMAKNJEN</div>
<div id="rotate">PREMAKNJEN</div>

#original { 
   float: left;
   width: 150px; 
   height: 70px; 
   background-color: rgba(249,171,2,0.50); 
   text-align: center; 
   line-height: 70px; 
   border-radius: 5px; 
}

#translate { 
   /* premikanje elementa */ 
   -ms-transform: translate(100px, 30px);     /* IE 9 */
   -webkit-transform: translate(100px, 30px); /* Safari */
   transform: translate(100px, 30px); 
}

#rotate {
   /* rotacija elementa */
   -ms-transform: rotate(-10deg);     /* IE 9 */
   -webkit-transform: rotate(-10deg); /* Safari */
   transform: rotate(-10deg);
}

#scale {
   /* zmanjšanje elementa */
   -ms-transform: scale(0.8,0.8);     /* IE 9 */
   -webkit-transform: scale(0.8,0.8); /* Safari */
   transform: scale(0.8,0.8);
}

#skew {
   /* zmanjšanje elementa */
   -ms-transform: skewX(-30deg);     /* IE 9 */
   -webkit-transform: skewX(-30deg); /* Safari */
   transform: skewX(-30deg);
}

Tranzicije

S tranzicijo v CSS3 spremembe elementov izvedemo tekoče od začetne vrednosti do končne vrednosti in v določenem času. Za izvedbo učinka tranzicije moramo določiti:

• transition-property: CSS lastnost, ki bo v tranziciji
• transition-duration: trajanje tranzicije

Efektu tranzicije lahko določimo še zamik začetka tranzicije z lastnostjo transition-delay in način oz. hitrost izvedbe tranzicije z lastnostjo transition-timing-function pri čemer lahko določimo naslednje vrednosti izvede tranzicije:

• ease:   počasen začetek, potem hitro, na koncu počasi (to je tudi privzeta vrednost)
• linear:   enakomerna hitrost
• ease-in:   počasen začetek
• ease-out:   počasen konec
• ease-in-out:   počasen začetek in počaseen konec
• cubic-bezier(n,n,n,n):   definiramo lahko svoje vrednosti funkcije

Primer transformacije, kjer se pri uporabi psevdorazreda hover spremeni širina okvirja:

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

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

#transition:hover { width: 400px }

Animacije

CSS3 omogoča izdelavo animacij. Glavna komponenta CSS animacij je pravilo @keyframes, kjer bo kreirana animacija. @keyframes predstavlja časovnico animacije, na kateri definiramo posamezne CSS oblikovne lastnosti animacije z lastnostjo animation.

@keyframes

Lastnosti stanja @keyframes so:

• ime animacije
• stanja od 0% do 100%
• CSS slogi za posamezna stanja

Primer določitve @keyframes:

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

kar lahko zapišemo tudi kot:

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

še krajše pa:

@keyframes prosojnost {   
   to { opacity: 0 } 
}

Koda prikazuje tranzicijo prosojnosti elementa od 1 do 0. V vseh treh primerih je animacija enaka!

animation

CSS lastnost animation uporabljamo za klic pravila @keyframes znotraj CSS selektorja. animation ima lahko več lastnosti:

• animation-name:@keyframes ime
• animation-duration: dolžina časovnega traka animacije od začetka do konca
• animation-timing-function: določi hitrost animacije ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier )
• animation-delay:določi zakasnitev animacije
• animation-iteration-count: določi število ponovitev animacije
• animation-direction: določi potek animacije od začetka do konca ali obratno, lahko tudi oboje
• animation-fill-mode: določa slog elementa, ko se animacija konča ( none | forwards | backwards | both )

Primer:

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

kar lahko zapišemo krajše:

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

Primer prikazuje animacijo z utripajočim učinkom, ki ima 1 sekundo zakasnitve, animacija pa traja 4 sekunde. Animacija se izvaja neprestano z linearno hitrostjo, smer izvajanja animacije pa je od začetka do konca in obratno in to izvajanje se potem ponavlja.

Oglejmo si primer animacije, kjer bo okvir besedila prešel v krog, se zarotiral za 180° in hkrati spreminjal še barvo:

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

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

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