Balvant Ahir Balvant Ahir - 5 months ago 51
CSS Question

CSS Animation Not working in Safari

I have a bit of CSS3 animation which works perfectly in all the browser which support CSS3 except safari. Weird isn't it? Ok here's my code:

What is problem here.

thanks in advance.

CSS:

@-o-keyframes inner-circle {
0% {transform:rotate(0deg);}
5% {transform:rotate(0deg);}
90% {transform:rotate(360deg);}
100% {transform:rotate(360deg);}
}
@-moz-keyframes inner-circle {
0% {transform:rotate(0deg);}
5% {transform:rotate(0deg);}
90% {transform:rotate(360deg);}
100% {transform:rotate(360deg);}
}
@-webkit-keyframes inner-circle {
0% {transform:rotate(0deg);}
5% {transform:rotate(0deg);}
90% {transform:rotate(360deg);}
100% {transform:rotate(360deg);}
}
@-ms-keyframes inner-circle {
0% {transform:rotate(0deg);}
5% {transform:rotate(0deg);}
90% {transform:rotate(360deg);}
100% {transform:rotate(360deg);}
}
@keyframes inner-circle {
0% {transform:rotate(0deg);}
5% {transform:rotate(0deg);}
90% {transform:rotate(360deg);}
100% {transform:rotate(360deg);}
}

.text-bg2 {
animation-name:inner-circle;
animation-duration:5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name:inner-circle;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-o-animation-name:inner-circle;
-o-animation-duration:5s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-moz-animation-name:inner-circle;
-moz-animation-duration:5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name:inner-circle;
-ms-animation-duration:5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}


HTML:

<div class="text-bg2"><img src="img/text-bg.png"></div>


What am I missing here ? Thx!

Answer

Use just need to add vendor specific css tranfsorm property i.e. wherever (all the places) you have included transform , add two lines of css as follows:

@-o-keyframes inner-circle {

    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* added vendor specific css (IE) */
        -webkit-transform: rotate(0deg); /* added vendor specific css (Safari, Opera , Chrome) */
    }
    5% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(0deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
    90% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);/* added vendor specific css (IE) */
        -webkit-transform: rotate(360deg);/* added vendor specific css (Safari, Opera , Chrome) */
    }
}