CSS3 анимации разные результаты на Chrome/Safari

Я работаю над анимацией ключевых кадров CSS3 с skew() преобразования. Мне удалось добиться результата, которого я искал в Safari 6. Однако, когда я просматриваю страницу в другом браузере Webkit, в Chrome я получаю другой результат анимации.

Вот мой код:

HTML

<div id="test">
    webkit animation test
</div>

CSS

#test {
    position: absolute;
    left: 200px;
    top: 0px;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,0.5);
    -webkit-animation-name: testBox;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;             /* alternate, normal */
    -webkit-animation-play-state: running;
}

@-webkit-keyframes testBox /* Safari and Chrome */ {
    0% {
        -webkit-transform: skew(70deg,0deg);
    }

    100% {
        -webkit-transform: skew(-70deg,0deg);
    }
}

У кого-нибудь еще есть эта проблема?

0 ответов

Другие вопросы по тегам