CSS3 animation not working in safari

Question

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:

HTML

<div class="right">
    <div class="key-arm"><img src="images/landing/key-arm.png" alt="arm" /></div>
</div>

CSS

.landing .board .right {
    width: 291px;
    height: 279px;
    background: url('../images/landing/key-pnl.png');
    bottom: 16px;
    right: 250px;
    position: absolute;
}
.landing .board .right .key-arm {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 41px;
    height: 120px;
}



/*=== Key Arm Animation ===*/
@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes keyarm {
    0% { -moz-transform: rotate(0deg); }
    5% { -moz-transform: rotate(-14deg); }
    10% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes keyarm {
    0% { -ms-transform: rotate(0deg); }
    5% { -ms-transform: rotate(-14deg); }
    10% { -ms-transform: rotate(0deg); }
}

@-o-keyframes keyarm {
    0% { -o-transform: rotate(0deg); }
    5% { -o-transform: rotate(-14deg); }
    10% { -o-transform: rotate(0deg); }
}

@keyframes keyarm{
    0% { transform: rotate(0deg); }
    5% { transform: rotate(-14deg); }
    10% { transform: rotate(0deg); }
}


.right .key-arm{
    -webkit-transform-origin: 12px 105px;
       -moz-transform-origin: 12px 105px;  
        -ms-transform-origin: 12px 105px;  
         -o-transform-origin: 12px 105px;  
            transform-origin: 12px 105px;  

   -webkit-animation: keyarm 8s ease-in-out 0s infinite;
      -moz-animation: keyarm 8s ease-in-out 4s infinite;
       -ms-animation: keyarm 8s ease-in-out 4s infinite;
        -o-animation: keyarm 8s ease-in-out 4s infinite;
           animation: keyarm 8s ease-in-out 0s infinite;
}

Ok this doesn't work in Safari as I said, there's no movement whatsoever.
Also, still and only in Safari, the key-arm div shows only if you resize the screen! It's there in the DOM but for some reason it doesn't show up!
What am I doing wrong?

Thanks
Mauro

UPDATE: Ok from your answers I got that @keyframes is not supported on Safari 4. It's strange because on the same page I have an animation that works using @keyframes!

here's the CSS code:

.board .rays{
    background: url("../images/landing/rays.gif") no-repeat 0 0 red;
    height: 381px;
    left: 251px;
    opacity: 1;
    top: 80px;
    width: 408px;
    position: absolute;
}

.board .bottle{
    background: url("../images/landing/bottle.gif") no-repeat 0 0 lime;
    bottom: 30px;
    height: 405px;
    left: 276px;
    width: 357px;
    z-index: 1;
    position:absolute;
}

/*=== Rays Animation ===*/
@-webkit-keyframes rays{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rays{
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

.board .rays{
   -webkit-animation: rays 40s linear 0s infinite;
   -moz-animation: rays 40s linear 0s infinite;
   animation: rays 40s linear 0s infinite;
}

And the html:

<div class="board">
    <div class="rays"></div>
    <div class="bottle"></div>
</div>

Try it yourself in jsFiddle (if you have Safari 4) and you'll see

Dump

Can you make a jsfiddle? jsfiddle.net – Sonometer

here it comes: jsfiddle.net/zalun/E4mz9 I haven't test it yet in Safari though. – Dump

jsfiddle.net/E4mz9/14 Here's the right link, sorry! By the way doesn't work in Safari, just tested – Dump

Where's the rays animation without browser prefixes? – Hokusai

Answer 1

Found the solution. In Safari when you use Keyframes you need to use the whole percentage:

this won't work:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

this will:

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

Don't know why but that's the way Safari works! :)

Dump

I doubt it's the reason as well. In my case I have an animation on left property, with from and to, perfectly working on all environment (including safari IOS). It doesn't work anymore when animating -webkit-transform – Olericulture

@Olericulture did you ever find out what was the issue? – Dallas

it helped me in a way that I finallly put "-webkit-transform:" instead of "transform:" ..inside @-webkit-keyframes.xxx{ }. Thanks – Alber

Answer 2

I was having troubles with CSS3 animation working in Safari 6, but not in Safari 4 (4.0.5).

It appears that the shorthand notation will not work in Safari 4.

So this won't work :

-webkit-animation: rays 40s linear forwards;

But this will work :

-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;

Carlcarla

It's still the same as of 2016 – Tetanus

This worked for me. Safari on iPhone 6s was not playing the animation with shorthand syntax. Using longhand / individual rules worked. Thanks! – Leucoderma

Answer 3

In situations where you're trying to animate transform on something as soon as it's injected into the DOM, I've had to add a very brief delay, like this:

animation: rays 40s linear 0.01s infinite;

Irvine

Wow, this was the only answer that worked for me animating a translateY in mobile Safari on iOS 10.2. – Bistre

Thanks for that! Worked – Bowleg

Thanks a lot! I use a pure CSS loading spinner from (loading.io/css/) and only hide/show the wrapper div and this was the reason why none of them worked – Busman

Answer 4

I struggled with an animation working in Safari 14 (14.1.2), but not in Safari 15, and thought I'd add my findings here.

This css is part of the scrolling text loop here.

#banner-loop {
    white-space: nowrap;
    animation: loop-anim 5s linear infinite;
}

@keyframes loop-anim {
    0% { margin-left: 0; }
    100% { margin-left: -50%; }
}

I noticed that the animation "played", but didn't animate.

I tried the solutions from the other answers here, but nothing worked (including having the -webkit prefix). In the end the problem was solved by changing the start keyframe value to 0% instead of 0.

It looks like Safari can't handle the unit-less 0 shorthand in this case.

Nieman

Answer 5

Try force quitting Safari and/or rebooting your phone (assuming you're on a phone).

Just had animations fail in Safari 15 for no apparent reason - very simple ones such as opacity and simple keyframes.

I noticed my phone was doing that thing where the white homescreen indicator gets permanently stuck on the long side of the phone even when holding it vertically. A reboot is usually needed to fix that.

Turns out rebooting also fixed the animations in Safari.

Another thing to remember with Safari is that low battery mode can affect animations and make them less smooth (and prevent muted autoplay videos from auto playing).

Alysiaalyson

Answer 6

@-webkit-keyframes { <- let this symbol to the same line
} - >

This works on iphone 3 ios 6.1.6 with -webkit- prefix on transform and animation

Irenairene