CSS3

1.CSS3 backgound – proprietăți noi

CSS3 conține trei proprietăți noi pentru background - background-size, background-origin

și background-clip, de asemenea, puteți adăuga mai multe imagini pentru fundalul unui element și chiar
să folosiți culori gradient cu linear-gradient.

A.background-size
Proprietatea background-size permite determinarea mărimii imaginii de background și puteți folosi
aceeași imagine în mai multe elemente cu dimensiuni diferite. Valorile pot fi specificate în pixeli (px) sau
procente (%).

Opțiuni posibile:
 auto - valoarea predefinită/default & redimensionează laturile imaginii astfel încât se menține
aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei
 procente - redimensionează lungimea și înălțimea imaginii de background, în procente relative la
elementul parinte & nu la imagine; prima valoare reprezinăa lungimea, a doua înălțimea iar dacă
se specifica numai o valoare, cealaltă e setată "auto".
 pixeli - redimensioneaza lungimea și înălțimea la mărimile specificate; dacă se specifică numai o
valoare, cealalta e setata "auto".
 cover - imaginea de background e mărita/micșorată astfel încât să acopere toata suprafața de
fundal
 contain - imaginea de background e marită/micșorataă astfel încât sa fie cuprinsa în zona de
conținut

Proprietatea background-size e recunoscută în IE9+, Firefox 4+, Opera, Chrome și Safari 5+.

Exemplu
<style type="text/css"><!--
#id1 {
width:200px;
height:100px;
 border:1px solid blue;
background:url('css3.jpg');
background-size:100px 60px;
background-repeat:no-repeat;
}
#id2 {
width:300px;
height:120px;
border:1px solid #01da02;
background:url('css3.jpg');
background-size:contain;
background-repeat:no-repeat;
}
#id3 {
width:300px;
height:120px;
border:1px solid silver;
background:url('css3.jpg');
background-size:cover;
}
--></style>

<div id="id1">Curs CSS gratuit - dimensiuni in pixeli</div>

<div id="id2">www.coursesweb.net - valoare contain</div>
<div id="id3">www.marplo.net - valoare cover</div>

B.Culoare gradient
Proprietatea background poate primi o valoare specială care definește o culoare gradient. Sintaxa
pentru codul ce definește gradient-ul diferă de la un browser la altul, de aceea trebuie specificată pentru
fiecare din navigatoarele web majore.

Exemplu
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe'); /* IE 7, 8 */
background-image: -ms-linear-gradient(top left, #01fe02, #0102fe); /* IE10 */
background: -moz-linear-gradient(top left, #1f1, #fff, #11f); /* Mozilla
Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0,
#0f1), color-stop(0.5, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top left, #01fe02, #0102fe); /* Opera
11.1+ */
background: linear-gradient(top left, #1f1, #fff, #11f); /* W3C Markup */
}
--></style>

Direcția culorii gradient și distanța pe care culorile o iau poate fi controlată. Daca doriți ca direcția
gradient-ului să înceapă de sus, folosiți doar top, în loc de "top left"; pentru stânga adăugați doar left. Ca
să setați distanța culorii în gradient, adăugați o valoare de tip procent dupa culoare (sau o valoare între 0
și 1 pentru browsere Webkit).

Exemplu
 <style type="text/css"><!--
#id1 {
width:300px;
height:120px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe'); /* IE 7, 8 */
background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe 99%);
/* IE10 */
background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/* Mozilla Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%);
/* Opera 11.1+ */
background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/* W3C Markup */
}
--></style>

C.background-origin
Proprietatea background-origin specifică zona de poziționare a imaginii în background & poate lua
trei valori diferite:
 padding-box - poziția e relativă la colțul din stânga-sus unde începe padding
 border-box - poziția e relativă la colțul din stâga-sus a bordurii
 content-box - imaginea de background e poziționata de la coltul stânga-sus unde începe
conținutul
Background-origin e recunoscut în IE9+, Firefox 4+, Opera, Chrome și Safari 5+.

Exemplu
<style type="text/css"><!--
#id1 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:content-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:border-box;
}
--></style>

<div id="id1">Pozitioneaza imaginea in background incepand de la

continut</div>
<div id="id2">Pozitionare relativa la bordura</div>

D. background-clip
Proprietatea background-clip specifică zona de colorare a fundalului și e folosită pentru a determina dacă
background-ul se extinde sau nu până în margini.

Poate lua una din cele trei valori:

 border-box - culoarea de fundal se extinde până în margini
 padding-box - culoarea de fundal e fixată la padding
 content-box - culoarea de fundal e fixată la zona conținutului

Background-clip e recunoscut in IE9+, Firefox 4+, Opera și Chrome.

Exemplu
 <style type="text/css"><!--
#id1 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:padding-box;
-webkit-background-clip:padding-box; /* Safari */
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:content-box;
-webkit-background-clip:content-box; /* Safari */
}
--></style>

<div id="id1">background-clip cu padding-box</div>

<div id="id2">background-clip cu content-box</div>

E. CSS3 imagini multiple de fundal

CSS3 permite aplicarea mai multor imagini de background la un element. Această caracteristică e
suportata în Firefox 3.6+, IE 9, Safari și WebKit. Imaginile multiple pentru background se adaugă în
proprietatea background-image separate prin virgula iar imaginea specificată mai la început apare mai în
față. Valorile din celelalte proprietăți legate de imaginile de fundal se adaugă în ordinea și numărul
imaginilor din background-image, sau se poate utiliza o singură valoare pentru toate.

Exemplu

<style type="text/css"><!--
#id1 {
width:400px;
height:150px;
background-image: url('html_course.jpg'), url('css3.jpg');
background-repeat: no-repeat, repeat-x;
background-position: center top, center bottom;
}
--></style>

<div id="id1">Imagini multiple de background</div>

2. CSS3 – border proprietăți noi

CSS3 conține caracteristici noi care permit crearea de colțuri rotunjite, umbre pentru chenare și folosirea
unei imagini pentru modificarea aspectului bordurii.
a.colturi rotunjite
Proprietatea border-radius permite crearea cu ușurință a colțurilor rotunjite în designul elementelor, fără
a fi nevoie de imagini sau mai multe tag-uri <div>. Internet Explorer suportă border-radius începand cu
IE9, dar puteți folosi biblioteca de funcții JavaScript DD_roundies ca să afișați colturi rotunjite în
navigatoare web care nu recunosc această proprietate CSS.
Exemplu
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
border:2px solid blue;
border-radius:28px;
}
--></style>

Colțurile rotunjite pot fi create și independent, folosind cele patru proprietăți individuale: border-top-left-
radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.

Exemplu
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
background-color:#bbfeda;
border:2px solid blue;
border-top-left-radius:20px;
border-bottom-right-radius:38px;
}
--></style>

b.adaugarere umbre la chenare

Proprietatea box-shadow se folosește pentru a adăuga umbre la chenare, fiind recunoscută în IE9+,
Firefox 4, Chrome și Opera.

Sintaxa:
elm { box-shadow: X_offset Y_offset blur marime culoare inset; }

unde

 elm - elementul HTML la care se aplică aceasta proprietate

 X_offset - este poziția/distanța umbrei pe latura orizontală & sunt permise și valori
negative
 Y_offset - este poziția/distanța umbrei pe latura verticală & sunt permise și valori
negative
 blur - definește distanta "blur" (optională - 0 sau nespecificată înseamnă fără
"blur")
 marime - mărimea umbrei (opțională)
 culoare - culoarea umbrei (optională - negru dacă nu e specificată)
 inset - schimbă umbra din exterior să apară în interior
Primele două valori trebuie specificate, restul sunt opționale, iar dacă "blur" sau mărime nu sunt
specificate, se consideră 0.

Exemplu
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
 background-color:#bbfeda;
box-shadow: 11px 11px 5px #7878da;
-webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */
}
--></style>

<div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>

Rezultat

c.imagine pentru bordura

Cu proprietatea border-image se poate folosi o imagine pentru a defini aspectul bordurii.
Aceasta se obține prin împărțirea zonei bordurii în nouă segmente, reprezentand cele patru colțuri, cele
patru laturi și centrul (dupa cum se vede în imaginea de mai jos).

Se folosește un singur fisier cu imaginea, împărțit similar în cele nouă segmente care
vor reprezenta colțurile, laturile și centrul.

Sintaxa box-shadow:
elm { border-image: url_img slice width outset repeat; }
unde
 url_img - adresa și numele imaginii folosită pentru bordură
 slice - specifică distanța pentru zona din imagine folosită în cele patru margini
 width - lungimea bordurii cu imaginea
 outset - specifică distanța față de marginea chenarului, de unde începe bordura cu
imagine
 repeat - specifică dacă partea de imagine trebuie repetată, rotunjită ca încadrare sau
întinsă (poate avea aceste valori: stretch, repeat, round).

Border-image nu e recunoscută în Internet Explorer iar Firefox folosește proprietatea -moz-border-image.

Safari și Chrome suportă -webkit-border-image.

Pentru a afișa cum trebuie border-image, trebuie să specificați și proprietatea border-width.

Exemplu – utilzeaza aceasta imagine 

<style type="text/css"><!--
#id1 {
width:200px;
 height:120px;
border-width:12px;
-moz-border-image:url('border_image.png') 30 30 round; /* Firefox */
-webkit-border-image:url('border_image.png') 30 30 round; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 round;
}
#id2 {
width:200px;
height:120px;
border-width:15px;
-moz-border-image:url('border_image.png') 30 30 stretch; /* Firefox */
-webkit-border-image:url('border_image.png') 30 30 stretch; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 stretch;
}
--></style>

<div id="id1"> CSS3 border-image, with round</div><br />

<div id="id2"> CSS3 border-image, with stretch</div>

Rezultat

3. CSS3 - text shadow, word-wrap, text –overflow

CSS3 introduce noi proprietăți pentru efecte de text, dar multe dintre ele nu sunt încă recunoscute
de principalele navigatoare web. Proprietățile care sunt mai bine acceptate: text-shadow, word-wrap și
text-overflow.

a.text-shadow
Proprietatea text-shadow introdusă în CSS3 permite adăugarea unui efect de umbră care să fie
aplicată textului conținut într-un element HTML. Umbra apare în jurul literelor.

Sintaxa:
text-shadow: offset_X offset_Y blur culoare;
unde
 offset_X - specifică poziția umbrei pe orizontală; sunt permise și valori negative
 offset_Y - specifică poziția umbrei pe verticală, sunt permise și valori negative
 blur - definește distanța pentru valoarea "blur" (optional).
 culoare - definește culoarea umbrei (opțional), dacă nu e specificată, se folosește
negru

Text-shadow e recunoscută de principalele browsere, cu excepția lui Internet Explorer, dar începând cu
versiunea 8 a acestui browser (Internet Explorer) se poate folosi proprietatea filter pentru a crea efecte de
umbră pentru text.

Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val,
strength=val);

 color - specifică culoarea umbrei

 direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right,
135=bottom right, 180=bottom, 225=bottom left, 315=top left
 strength - reprezintă cantitatea de "blur"
Exemplu
<style type="text/css"><!--
h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135,
strength=5);
text-shadow: 2px 3px 3px #a0a1fe;
}
--></style>

<h2>Text cu text-shadow</h2>

Se pot adăuga mai multe umbre la același text, prin crearea unei liste de umbre în cadrul proprietatii text-
shadow, separate prin virgula.

Exemplu – următoarea secvență de cod amestecă o culoare verde cu una albastra ca să realizeze un efect
de umbră cu aceste 2 culori
<style type="text/css"><!--
h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135,
strength=5);
text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2);
}
--></style>

<h2>Text cu doua culori pt. text-shadow</h2>

S-a utilizat formula RGBA (Rosu, Verde, Albastru, Alpha) la definirea culorii, adăugând ți transparență
(Alpha) în același timp.

b.word-wrap
Cu word-wrap puteți determina browser-ul să despartă cuvintele lungi, când acestea depășesc
lungimea elementului, trecând pe un rând nou.

Sintaxa:
word-wrap: valoare;
unde "valoare" poate fi
  - normal - nu desparte cuvintele întregi (valoare implicita)
  - break-word - permite despărtirea cuvintelor întregi, cuvintele sunt despărțite la
nivel de caracter și nu în silabe
Exemplu
 <style type="text/css"><!--
#id1 {
width:100px;
border:1px solid blue;
word-wrap:break-word;
}
--></style>

<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>

c.text-overflow
Cu proprietatea text-overflow puteți determina ce să se întâmple cu textul, când acesta depășește
lungimea elementului. Text-overflow este suportat în majoritatea navigatoarelor web, în afarî de Firefox.

Sintaxa:
text-overflow: valoare;
unde "valoare" poate fi:
 clip - taie textul (valoare implicita)
 ellipsis - afișează trei-puncte ("…") în locul textului tăiat
În general, proprietatea text-overflow se utilizează împreună cu white-space:nowrap și
overflow:hidden.

Exemplu
<style type="text/css"><!--
#id1 {
width:230px;
border:1px solid blue;
white-space:nowrap;
overflow:hidden; /* "overflow" valoarea trebuie sa fie diferita de
"visible" */
text-overflow:ellipsis;
}
#id2 {
width:230px;
border:1px solid green;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
--></style>

<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte

cuvinte.</div>
<div id="id2">Site web www.marplo.net - alt text lung intr-un singur
rand.</div>

4. CSS3 – opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite
modificarea transparentei elementului. IE8 și versiunile anterioare folosesc o variantă alternativă și
anume proprietatea filter.

Sintaxa:
filter: alpha(opacity=X); /* pt. IE */
opacity: X;
 unde X - reprezintă o valoare cuprinsă între 0 = complet transparent și 1.0 = fără
transparență

Exemplu <div> cu o transparență CSS de 40%

<style type="text/css"><!--
#dv {
background-color:blue;
width:200px;
height:100px;
filter:alpha(opacity=40); /* pt. IE */
opacity:0.4;
}
--></style>

<div id="dv">Un continut oarecare ...</div>

Exemplu - setează opacitatea la 50% pentru o imagine

<style type="text/css"><!--
#im {
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"

id="im" />

Exemplu - efect imagine transparenta 50% iar la mouseover 100%

<style type="text/css"><!--
#im2 {
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
#im2:hover {
filter:alpha(opacity=100); /* pt. IE */
opacity:1;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"

id="im2" />

Exemplu – conținutul dintr-un DIV care la mouseover este acoperit cu un alt <div> transparent; DIV-ul
transparent trebuie sa fie gol, adăugat în primul și setat cu:   position:absolute;
<style type="text/css"><!--
#trans {
display:none;
position:absolute;
top:2%;
left:2%;
width:96%;
height:95%;
background-color:#07fe08;
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
#cnt {
position:relative;
background:#e7e8fe;
width:300px;
height:200px;
border:1px solid blue;
 padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>

<div id="cnt">
<div id="trans"></div>
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>

5. CSS3 – trasformări 2D
Cu proprietatea CSS transform se poate modifica forma, mărimea și poziția elementelor HTML.
Se pot transforma elementele HTML în plan 2D sau 3D.

Sintaxa:
transform: metoda(valori);

În continuare sunt prezentate metodele de transformare în plan 2D și anume: translate(),   rotate(),  

scale(),   skew().

Internet Explorer 9 folosește -ms-transform. Firefox folosește -moz-transform. Chrome & Safari
folosesc   -webkit-transform. Opera folosește   -o-transform .

a.Metoda translate()
Metoda translate() mută elementul de la poziția inițială, în functie de parametri dați pentru
poziționare față de stânga (axa-X) ți față de partea de sus (axa-Y).

Sintaxa:
transform: translate(X, Y);

Exemplu - când utilizatorul plasează cursorul mouse-ului pe un anumit DIV, îi mută poziția cu 20 pixeli
față de stânga ți 15 pixeli față de partea de sus.
<style type="text/css">
#idv {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}
#idv:hover {
transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px); /* IE 9 */
-webkit-transform: translate(20px, 15px); /* Safari si Chrome */
-o-transform: translate(20px, 15px); /* Opera */
-moz-transform: translate(20px, 15px); /* Firefox */
}

</style>
<div id="idv">Pozitionati mouse-ul aici.</div>

b.CSS rotate()
Metoda rotate() rotește elementul HTML, în sensul acelor de ceasornic dacă valoarea e pozitivă și
în sens invers dacă valoarea e negativă.
Sintaxa:
transform: rotate(grade);

Exemplu - rotește elementul cu 60 grade în sensul acelor de ceasornic

<style type="text/css">
#idv2 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv2:hover {
transform: rotate(60deg);
-ms-transform: rotate(60deg); /* IE 9 */
-webkit-transform: rotate(60deg); /* Safari si Chrome */
-o-transform: rotate(60deg); /* Opera */
-moz-transform: rotate(60deg); /* Firefox */
}
</style>

<div id="idv2">Pozitionati mouse-ul aici.</div>

c.Metoda scale()
Metoda scale() mărește sau micșorează mărimea elementului HTML (inclusiv conținutul
acestuia), în functie de parametri specificați lungime (axa-X) și înălțime (axa-Y).

Sintaxa:
transform: scale(lungime, inaltime);

unde valorile pentru lungime și înălțime sunt în procente; de exemplu 1.5 înseamnă 150% față de
mărimea originală.

Exemplu - transformă lungimea elementului astfel încât să devină de 2 ori mai mare decât mărimea
originală și înălțimea de 1.5 ori mai mare decât înălțimea originală.
<style type="text/css">
#idv3 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}

#idv3:hover {
transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5); /* IE 9 */
-webkit-transform: scale(2, 1.5); /* Safari si Chrome */
-o-transform: scale(2, 1.5); /* Opera */
-moz-transform: scale(2, 1.5); /* Firefox */
}
</style>

<div id="idv3">Pozitionati mouse-ul aici.</div>

d.CSS skew()
Metoda skew() distorsioneaza elementul HTML pe orizontală (axa-X) și verticală (axa-Y), incluzând
și conținutul elementului.

Sintaxa:
transform: skew(Xdeg, Ydeg);

Exemplu - distorsionează elementul 20 de grade pe lungime (axa-X) și 25 de grade pe verticală (axa-Y).

<style type="text/css">
#idv4 {
width:160px;
height:90px;
background:#abcdfe;
font-size:18px;
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */
-o-transform: skew(20deg, 25deg); /* Opera */
-moz-transform: skew(20deg, 25deg); /* Firefox */
}
</style>

Cele 4 metode de transformare pot fi utilizate și într-o singură definiție transform, metodele specificate
fiind separate prin spațiu.

Sintaxa:

transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime) skew(Xdeg, Ydeg);

Puteți adăuga doar acele metode pe care doriți să le folosiți în transformare.

Exemplu - elementul este mutat cu 50 de pixeli față de partea din stânga și 25 de pixeli față de partea de
sus, el este rotit cu 20 de grade în sens invers acelor de ceasornic, transformă lungimea sa care devine de
2 ori mai mare decât cea inițială și înălțimea de 1.5 ori și distorsionează elementul cu 15 grade pe
orizontală și 20 de grade pe verticală.

<style type="text/css">
#idv5 {
width:90px;
height:90px;
background:#00da01;
font-size:17px;
transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,
20deg);

-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,

20deg); /* IE 9 */

-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)

skew(15deg, 20deg); /* Safari si Chrome */

-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,

20deg); /* Opera */
 -moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,
20deg); /* Firefox */
}
</style>

6. CSS3 – transition
CSS3 transition poate fi utilizată pentru a anima proprietățile CSS, adăugând un efect de animație când
se modifica proprietățile CSS ale unui element HTML, schimbându-se gradual de la un stil la altul.

CSS3 transition are 4 componente:

- transition-property - specifică numele proprietații/proprietăților la care transition trebuie
aplicat: width, color, font-size
- transition-duration - specifică durata tranziției/animației în sesunde (s), milisecunde (ms),
(implicit 0)
- transition-timing-function - definește viteza efectului în timpul transformarii:
      ease (implicit), linear, ease-in, ease-out, ease-in-aut
- transition-delay - definește timpul de așteptare până când începe efectul "transition"
(implicit 0)

Pentru a folosi CSS3 transition, trebuie specificate aceste două lucruri:

- proprietatea CSS la care se aplica efectul ( transition-property)
- durata efectului ( transition-duration)

Ultimele doua componente - transition-timing-function și transition-delay sunt opționale iar Internet

Explorer recunoaste "CSS3 transition" începând cu versiunea IE 10.

Exemplu - cand mouse-ul este deasupra unui anumit div se va 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>

Daca se dorește se pot adauga toate cele 4 componente într-o singură proprietate transition.

Sintaxa:
transition: transition-property transition-duration transition-timing-function
transition-delay;

Exemplu - schimbă gradual "font-size" în 0.4 secunde cu viteza "ease-out" când 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://www.marplo.net/curs_css/" title="Curs CSS
gratuit">Curs CSS gratuit</a></li>
<li class="clse"><a href="http://www.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>

Se pot adăuga mai multe proprietăți pentru un efect transition într-o singura definiție, separate prin
virgulă.

Exemplu - adăugare efect la: background, opacity și 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>

Proprietăți CSS ce pot fi animate

Lista cu proprietăți CSS care pot fi utilizate în transition:

- proprietati text -   color, font-size, font-weight, letter-spacing, line-height, text-indent,

text-shadow, vertical-align, word-spacing

- proprietati 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, width, min-width, max-width.

- proprietati de pozitionare -   bottom, top, left, right, grid-, visibility, z-index, zoom .

7. ANIMATION – exemple
Propietatea animation-duration definește perioada de timp în care animația trebuie să se se execute
complet. Dacă această proprietate nu este specificată nu se va realiza nici o animație deoarece valoarea
implicită este 0 secunde.

Se poate specifica momentul de timp la care să se schimbe stilul animației utilizând opțiunile FROM și
TO care reprezintă momentul în care animația pornește și când se oprește 0% (start) si 100% (complete).

Se pot utiliza și procente caz în care se pot adăuga cât de multe schimbări de stiluri dorim.

În exemplul de mai jos culoarea background-ului / background-color elementului <div> se va modifica

atunci când animația atinge 25% , 50% din timpul de execuție și atunci când este completă = 100%.

/* The animation code */

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* Standard syntax */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<div></div>

</body>
</html>

În exemplul de mai jos se vir schimba atât backgroun-ul cât și poziția elementului DIV la momentele de
timp specificate cu procente ale animației.

/* The animation code */

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Proprietatea animation-delay specifică întîrzierea cu care să înceapă animația. În exemplul de mai jos
acest delay este de 2 secunde.
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Dacă se utilizează o valoare negativă a delay-ului se consideră faptul că deja animația a rulat deja N
secunde.

În exemplul de mai jos la momentul în animația pornește se consideră că deja s-au rulat/executat 2
secunde din ea.

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Exmplul de mai jos utilizează 6 proprietăți de animație.

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
Cod sursă

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: example;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* Standard syntax */
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<div></div>

</body>
</html>

O animație cu același efect poate fi realizată proprietatea generică/scurtă animation

div {
  animation: example 5s linear 2s infinite alternate;
}

Cod sursă
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0
- 8.0 */
animation: myfirst 5s linear 2s infinite alternate;
}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and

earlier versions.</p>

<div></div>

</body>
</html>