3

たとえば、スケールを 1 から 2 に変更し、スケール 2 になったときにそれを保持したい場合、たとえば、ユーザーがスケーリングされた画像をホバーしている間、それは可能ですか?

@-webkit-keyframes scale {
    from {
        transform: scale(1);
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Safari and Chrome */
    }
    to {
        transform: scale(1.5);
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
    }
}
@keyframes scale {
    from {
        transform: scale(1);
        -ms-transform: scale(1); /* IE 9 */
        -webkit-transform: scale(1); /* Safari and Chrome */
    }
    to {
        transform: scale(1.5);
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari and Chrome */
    }
}

div.item:hover
{
animation: scale 2s;
-webkit-animation: scale 2s;
}
4

5 に答える 5

1

キーフレーム アニメーションの代わりに transition プロパティを使用できます。

div.item {
    transform: scale(1);
    transition: all .2s;
}

div.item:hover {
  transform: scale(1.5);
}

例については、このフィドルを参照してください: http://jsfiddle.net/8eHHL/

于 2013-04-25T12:13:50.803 に答える
0

あなたの場合、残念ながらアニメーションの結果を保持することはできません。ホバー時にアニメーションをバインドし、ユーザーが要素からマウスをぼかしたときにそれを維持しようとします。ただし、クリック時にアニメーションを維持する機能があります。クリックイベントは :target で行われます

于 2013-04-25T12:17:07.720 に答える