Monthly Archives May 2017

Animatii CSS

O alta tehnica similara cu tranzitiile este reprezentata de animatiile CSS. Dupa cum le spune si numele, animatiile CSS sunt definite folosind doar CSS. Aceasta inseamna ca ca si ele pot profita de accelerarea hardware din browserele suportate.

Iata un exemplu de o animatie simpla:

/*o animatie denumita simpleanim*/

@-webkit-keyframes simpleanim

{

0%

{

opacity:1;

-webkit-transform:scale(1);

}

25%

{

-webkit-transform:scale(1.1);

}

100%

{

opacity:0,6;

-webkit-tranform:scale(1.5);

}

}

Sa spunem ca dorim sa aplicam aceasta animatie unui link atunci cand utilizatorul sta cu mouse-ul deasupra lui. Iata cum am obtine acest lucru:

a:hover

{

-webkit-animation-name:simpleanim;

-webkit-animation-duration:500ms;

-webkit-animation-timing-function:ease-in;

}

Animatiile CSS ofera o modalitate foarte pute...

Vezi articol