CSS3 анимация не работает в сафари - PullRequest
Новая
       39

CSS3 анимация не работает в сафари

25 голосов
/ 09 февраля 2012

У меня есть немного CSS3-анимации, которая отлично работает во всех браузерах, которые поддерживают CSS3, кроме сафари. Странно, не правда ли? Хорошо, вот мой код:

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

Хорошо, в Safari это не работает, как я уже сказал, движения вообще нет.
Кроме того, все еще и только в Safari, div key-arm показывается только при изменении размера экрана! Он есть в DOM, но по какой-то причине его не видно!
Что я делаю не так?

Спасибо
Mauro

ОБНОВЛЕНИЕ: Хорошо, из ваших ответов я понял, что @keyframes не поддерживается в Safari 4. Это странно, потому что на той же странице у меня есть анимация, которая работает с использованием @keyframes!

вот код CSS: 

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

И HTML: 

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

Попробуйте сами в jsFiddle (если у вас Safari 4), и вы увидите

Ответы [ 4 ]

45 голосов
/ 24 февраля 2012

Нашел решение. В Safari, когда вы используете ключевые кадры, вам нужно использовать весь процент:

это не сработает: 

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

это будет: 

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

Не знаю почему, но Safari работает именно так! :)

31 голосов
/ 08 июля 2013

У меня были проблемы с анимацией CSS3, работающей в Safari 6, но не в Safari 4 (4.0.5).

Похоже, что сокращенная запись не будет работать в Safari 4.

Так что это не сработает: 

-webkit-animation: rays 40s linear forwards;

Но это будет работать: 

-webkit-animation-name: rays;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
6 голосов
/ 13 октября 2016

В ситуациях, когда вы пытаетесь анимировать transform на чем-то, как только оно вводится в DOM, мне пришлось добавить очень короткую задержку, например:

animation: rays 40s linear 0.01s infinite;

0 голосов
/ 01 декабря 2015 
@-webkit-keyframes { <- let this symbol to the same line
} - >

Это работает на iphone 3 ios 6.1.6 с префиксом -webkit- для преобразования и анимации

...