CODEWITHSUNDEEP
csscss-transitions
Bob van Luijt
Bob van Luijt

Reputation: 7598

CSS3 transition rotate in Safari

On all browsers the below code functions well, but it doesn't in Safari. I'm also unable to find a good answered question like this on Stack, am I missing something?

http://jsfiddle.net/pw13yd3x/1/

.containerLinksBlock {
    background-color:red;
    width:100px;
    height:100px;
    -ms-transition: border-radius 0.6s, transform 1.6s;
    -webkit-transition:border-radius 0.6s, transform 1.6s;
    -o-transition: border-radius 0.6s, transform 1.6s;
    transition:border-radius 0.6s, transform 1.6s;
}
.containerLinksBlock:hover {
    border-radius:0px 42px 0px 42px;
    -ms-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    transform: rotate(420deg);
}

Upvotes: 1

Views: 966

Answers (1)

OrionMelt
OrionMelt

Reputation: 2601

You need to add the -webkit prefix in the transitions too.

-webkit-transition:border-radius 0.6s, -webkit-transform 1.6s;

Upvotes: 2

Related Questions