CODEWITHSUNDEEP
cssgoogle-chrome
Aoi
Aoi

Reputation: 847

Css scale animation not working in chrome

I am using the following to give the text a sort of pulsating effect, but the animation doesn't seem to work in chrome. What am I doing wrong?

.item{
    -webkit-animation: caMenuTextOut 600ms ease-in-out;
    -moz-animation: caMenuTextOut 600ms ease-in-out;
    animation: caMenuTextOut 600ms ease-in-out;
}
@keyframes caMenuTextOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

Upvotes: 0

Views: 788

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

Chrome doesn't support standard animations yet. Use the vendor prefix: @-webkit-keyframes. You can have this at the same time as @keyframes, but you have to declare the entire thing twice, unfortunately.

http://jsfiddle.net/ExplosionPIlls/85hE5/

Upvotes: 2

Related Questions