Animație folosind modificări css

Exemplele vor lucra în Firefox, Chrome, Safari și Internet Explorer 10. Din păcate, în browsere mai vechi, nu veți vedea aceste efecte și schimbări sau transformări se va întâmpla fără animație.

Animațiile care le veți vedea în acest ciclu lecție va răspunde la un eveniment, cum ar fi indicatorul mouse-ului. Asta este, atunci când mutați funcția corespunzătoare se numește, și este transformată într-o perioadă de timp predeterminată.

Browsere Firefox și Opera de sprijin este acum de conversie la o sintaxă aproape identică. Avem nevoie doar de a utiliza prefixele corespunzătoare -moz-. -o- și -webkit-.

Internet Explorer 10-a doua versiune acceptă proprietățile tranziții fără prefixul. Dar pentru versiunea preview a IE10 -ms- necesitatea de a utiliza un prefix.

Pentru toate browserele moderne funcționează tranziții, utilizați următoarele prefixele:

Și pentru transformare:

• -webkit-tranziție
• -Moz-tranziție
• -ms-tranziție
• tranziție

Noi omite prefixul -o. pentru că acum Opera recunoaște proprietățile WebKit.

conversie statică

conversie CSS vă permit să modificați aspectul elementului, rotiți-l, și să producă pe ea alte operațiuni. Pentru a vedea animația trebuie să vă asigurați că animația apare ca răspuns la o anumită mișcare de utilizator. De exemplu, dacă plasați cursorul mouse-ului peste orice element. În caz contrar, pagina apare și elementele vor fi în starea finală (adică după conversie) și procesul de conversie (animație) și nu veți vedea.

Acest lucru este demonstrat în exemplul următor:

Glisați-l spre stânga sus.