css - css 完成后保持动画

Question

例如，我从 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;
}

Answer 1

使用animation-fill-mode：forwards或both

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

Answer 2

您可以使用过渡属性而不是关键帧动画。

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

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

看这个小提琴的例子：http: //jsfiddle.net/8eHHL/

Answer 3

用这个：

.div.item { animation: bubble 1.0s forwards;
   -webkit-animation: bubble 1.0s forwards;  /* for other modern browsers */
}

Answer 4

I'm afraid it's impossible to keep result of animation in your case. You bind animation on hover and trying to keep it when user blurs mouse from your element. But there is ability to keep animaton on click. click event is done with :target

Answer 5

使用这个。我认为它会工作。我只提供你需要为所有人编写的 webkit(Crome) 版本。

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

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