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.

Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
<style> 
#iddv {
width:80px;
height:80px;
background:#b8b9fe;
font-size:17px;
transition-property: width; 
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: property duration timing-function 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> 
.clse {
width:200px;
font-size:13px;
transition: font-size 0.4s ease-out;
}

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

<ul>
 <li class="clse"><a href="//marplo.net/css" title="Curs CSS gratuit">Curs CSS gratuit</a></li>
 <li class="clse"><a href="//marplo.net/html" title="Curs HTML">Curs HTML</a></li>
 <li class="clse"><a href="//coursesweb.net/" title="Cursuri Programare Web">Cursuri Programare Web</a></li>
</ul>
• 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> 
.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; 
}

.clsdv:hover {
background: #00da01;
opacity:0.5;
transform:rotate(180deg);
}
</style>

Puneti mouse-ul deasupra acestui dreptunghi.
<div class="dv1">
 <div class="clsdv"></div>
 Text oarecare, ascuns
</div><style> 
.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; 
}

.clsdv:hover {
background: #00da01;
opacity:0.5;
transform:rotate(180deg);
}
</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.

• O alta metoda de a anima proprietatile unui element HTML cu CSS este utilizand proprietatile "animation". Vedeti tutorialul: Animatie elemente HTML cu CSS.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()
var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]);            // download
Ce functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger bigger
He is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grande
Él es más grande que su hermana.
- El este mai mare decat sora lui.
CSS3 transition

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (117663)
  2. Ghiciti Cuvantul (1588)
  3. Cursuri limba engleza gratuite si lectii online (35116)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (54180)
  5. Curs si Tutoriale Ajax (33082)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (712)
  2. Curs HTML gratuit Tutoriale HTML5 (518)
  3. Curs si Tutoriale JavaScript (479)
  4. Curs si Tutoriale Ajax (441)
  5. Curs CSS Online Tutoriale CSS3 (429)