CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut.
CSS3 transition are 4 componente:


Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri:
      1. Proprietatea CSS la care se aplica efectul ( transition-property ).
      2. Durata efectului ( transition-duration ).
- Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale.
- Internet Explorer recunoaste "CSS3 transition" incepand cu IE 10.

Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
<style type="text/css"> 
#iddv {
 width:80px;
 height:80px;
 background:#b8b9fe;
 font-size:17px;
 transition-property: width; 
 transition-duration: 1.4s;

/* Firefox 4 */ 
 -moz-transition-property: width;
 -moz-transition-duration: 1.4s;
/* Safari si Chrome */ 
 -webkit-transition-property: width;
 -webkit-transition-duration: 1.4s;
/* Opera */
 -o-transition-property: background-color, color; 
 -o-transition-duration: 1.4s;
}

#iddv:hover {
 width:200px;
}
</style>

<div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>

Demo (Cand cursorul mouse-ului iese din zona elementului, revine gradual la stilul initial):
Pozitionati mouse-ul pe acest patrat.
 

Proprietatea transition prescurtata

Se pot adauga toate cele 4 componente intr-o singura proprietate transition.
Sintaxa:
transition: transition-property transition-duration transition-timing-function transition-delay;
Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out") cand mouse-ul e deasupra unui element cu class="clse".
<style type="text/css"> 
.clse {
 width:150px;
 font-size:13px;
 transition: font-size 0.4s ease-out; 
 -moz-transition: font-size 0.4s ease-out; /* Firefox 4 */ 
 -webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */
 -o-transition: font-size 0.4s ease-out; /* Opera */
}

.clse:hover {
 font-size: 16px;
}
</style>

<ul>
 <li class="clse"><a href="http://marplo.net/css" title="Curs CSS gratuit">Curs CSS gratuit</a></li>
 <li class="clse"><a href="http://marplo.net/html" title="Curs HTML">Curs HTML</a></li>
 <li class="clse"><a href="http://www.coursesweb.net/" title="Cursuri Programare Web">Cursuri Programare Web</a></li>
</ul>

Demo {plasati cursorul deasupra fiecarui link}:

• Se pot adauga mai multe proprietati pt efect "transition" intr-o singura definitie, separate prin virgula.
Exemplu. Adaugare efect la: background, opacity si transform:
<style type="text/css"> 
.dv1 {
 width:115px;
 height:100px;
 position:relative;
 font-size:17px;
 text-align:center;
 padding-top:18px;
}

.clsdv {
 width:120px;
 height:100px;
 position:absolute;
 top:0;
 left:0;
 background:#b8b9fe;
 transition: background 1.3s, opacity 1.8s, transform 1.4s; 
 -moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s; /* Firefox 4 */ 
 -webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s; /* Safari si Chrome */
 -o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; /* Opera */
}

.clsdv:hover {
 background: #00da01;
 filter:alpha(opacity=50); /* pt IE */
 opacity:0.5;
 transform:rotate(180deg);
 -moz-transform:rotate(180deg); /* Firefox 4 */
 -webkit-transform:rotate(180deg); /* Safari si Chrome */
 -o-transform:rotate(180deg); /* Opera */
}
</style>

Puneti mouse-ul deasupra acestui dreptunghi.
<div class="dv1">
 <div class="clsdv"></div>
 Text oarecare, ascuns
</div>
Demo:
Puneti mouse-ul deasupra acestui dreptunghi.
 
Text oarecare, ascuns

Proprietati CSS ce pot fi animate

Lista cu proprietati CSS care pot fi utilizate in transition:

- Proprietati pt text:   color, font-size, font-weight, letter-spacing, line-height, text-indent, text-shadow, vertical-align, word-spacing.
- Proprietati pt elemente tip bloc:   background, background-color, background-image, background-position, border-left-color etc., border-spacing, border-left-width etc., clip, crop, height, min-height, max-height, margin-left etc., opacity, outline-width, outline-offset, outline-color, padding-left etc., width, min-width, max-width.
- Proprietati de pozitionare:   bottom, top, left, right, grid-, visibility, z-index, zoom .

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
CSS3 transition

Last accessed pages

  1. The Rise Of Atlantis (2960)
  2. Bubble Hit (922)
  3. Jocuri Puzzle (4924)
  4. Verbe frazale din limba Engleza (1699)
  5. I sau Me - Test Engleza (420)

Popular pages this month

  1. Bubbles3 (3988)
  2. Gramatica limbii engleze - Prezentare Generala (3589)
  3. Butterfly Kyodai (2552)
  4. Jocuri Mahjong (1631)
  5. Jocuri Zuma (1368)