Animacja w css z SkewX nie działa

Dla specjalistów Webmastering
#1 
@-webkit-keyframes anim{
    10%{-webkit-transform: skewX(10deg);}
    20%{-webkit-transform: skewX(-10deg);}
    30%{-webkit-transform: skewX(10deg);}
    40%{-webkit-transform: skewX(-10deg);}
    50%{-webkit-transform: skewX(10deg);}
    60%{-webkit-transform: skewX(-10deg);}
    70%{-webkit-transform: skewX(10deg);}
    80%{-webkit-transform: skewX(-10deg);}
    90%{-webkit-transform: skewX(10deg);}
    100%{-webkit-transform: skewX(0deg);}
}
a:hover{
    -webkit-animation: anim 1s;
}

Dlaczego mi to nie działa ?

#2

Dopisz display: block; (lub “inline-block”) dla tagu “a:hover”, powinno pomóc.

#3

Pomogło display: block; a byłbyś tak miły i napisał lub zarzucił jakimś linkiem, gdzie jest napisane dlaczego bez display: block; nie działa ?

#4

Ogólnie, dla elementów liniowych animacje, transformacje są pomijane/blokowane (obiekty blokowe -block- lub “pseudo-blokowe” -inline-block- mogą być animowane), a tag odnośników domyślnie ma zadeklarowane “display: inline;”, z tego też względu trzeba zmieniać parametr wyświetlania dla takich elementów (ma to związek z “błędem” w webkit i chyba zmianami w specyfikacji w3c, dla Fx’a nawet wyłączono transformacje obiektów liniowych…).

 

#5

Dobra, dziękuje Ci. Będę się stosował do tego co napisałeś :slight_smile:

Pozdrawiam :slight_smile: