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);
}
}
У кого-нибудь еще есть эта проблема?