2

キーフレームで単純な回転をアニメーション化しようとしています。それはすべて良いことですが、マウスをオフにすると突然停止するのが嫌いです。私はもう試した：

 -webkit-animation-timing-function: ease-in-out;

ただし、それはアニメーション全体ではなくフレームにのみ適用されます。

これは私が持っているものです。

@-webkit-keyframes Rotate {
0% {
    -webkit-transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(360deg);
} }

そしてホバー

a:hover {
-webkit-animation-name: Rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; }
4

1 に答える 1

0

これがキーフレームで機能するかどうかはわかりませんが、うまくいくと思います。

私が取り組んできた例では、右向きの矢印が必要で、ロールオーバー時にスムーズに回転して下向きになりました。コードは次のとおりです。

div#welcome img{
            -webkit-transition: 1.5s all ease;
            -moz-transition: 1.5s all ease;
            -o-transition: 1.5s all ease;
    transition: 1.5s all ease;               
}

div#welcome:hover img {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    transform: rotate(90deg);   
}

そして、ここにマークアップfyiがあります：

<div id="welcome">
            <h1>Welcome
            </h1>
            <img class="hover" src="images/arrow.png" />
            <p>
               blah blah blah
            </p>
        </div>

コツは、トランジションを初期状態に置くことです。この場合はdiv#welcome h1 imgで、最終結果をアクション状態、つまり :hover スタイルに置きます。これは、ユーザーがロールオーバーしたときに、矢印が滑らかに回転してロールオフすることを意味します。

スタイリングの簡単な部分はここで説明されています。

于 2012-04-10T11:07:28.140 に答える