1

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

他の誰かがこの問題を抱えていますか?

4

0 に答える 0