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:
<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>
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://www.discant.ro/curs_css/" title="Curs CSS ">Curs CSS </a></li> <li class="clse"><a href="http://www.discant.ro/html/" title="Curs HTML">Curs HTML</a></li> <li class="clse"><a href="http://www.discant.ro/" title="Cursuri Programare Web">Cursuri Programare Web</a></li> </ul>
<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: