CODEWITHSUNDEEP
css
user455318
user455318

Reputation: 3346

transition not working in chrome

http://jsfiddle.net/x3Kc7/1/

.play {
    border-radius: 50px;
    height: 90px;
    width: 90px;
    transition: all .2s ease-out, background 2s ease-in;
    -o-transition: all .2s ease-out, background 2s ease-in;
    -ms-transition: all .2s ease-out, background 2s ease-in;
    -moz-transition: all .2s ease-out, background 2s ease-in;
    -webkit-transition: all .2s ease-out, background 2s ease-in;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;

}

.play:hover {
    transform: scale(1.2);
}

This code works perfectly in firefox, however not in chrome. What is incorrect?

Upvotes: 1

Views: 110

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

You didn't include the -webkit- prefix for your hover animation.

Here is the JSFIDDLE

What I changed,

.play:hover {
   transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
}

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240938

You need the -webkit vendor for the transform property: -webkit-transform: scale(1.2), as it isn't supported in Chrome otherwise. Same goes for other -webkit browsers like Safari.

jsFiddle example - works in Chrome.

.play:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

Aside from that, you would also need:

-moz-transform: scale(1.2) if you want support in FF 16<

-ms-transform: scale(1.2) if you want support in IE9

-o-transform: scale(1.2) if you want support in Opera 12<

It will otherwise work in all major browsers.

Upvotes: 3

Related Questions