skew()
変換を使用して CSS3 キーフレーム アニメーションに取り組んでいます。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);
}
}
他の誰かがこの問題を抱えていますか?