CODEWITHSUNDEEP
csssafaricss-animations
Balvant Ahir
Balvant Ahir

Reputation: 620

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!

Upvotes: 2

Views: 4556

Answers (3)

Pranjal
Pranjal

Reputation: 1118

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) */
    }
}

Upvotes: 4

kevin seda
kevin seda

Reputation: 406

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

Adding -webkit- in the beginning only, wont change the fact that transform needs it aswel. You need to like do it inside the brackets aswel. For example: 

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

and do that to all the others aswel.

Upvotes: 2

Erick T.
Erick T.

Reputation: 92

You need to set the animation name and timing before the keyframes animation and not after

So:

.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;
}

@-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);}
}

Upvotes: 0

Related Questions