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

- Hello

---

不需要将 -ms-transform 放入 @-webkit-keyframes 中。 - Pavlo

Answer 1

使用animation-fill-mode属性： forwards或者both

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

- emn178

Answer 2

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

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

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

请参考这个 jsfiddle 示例：http://jsfiddle.net/8eHHL/

- holamon

Answer 3

使用这个：

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

- RAMM-HDR

Answer 4

使用这个。我认为它会起作用。 我只给出了Webkit（Chrome）版本，你需要为所有版本编写。

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

- amit ghosh

---

我看不出任何区别，从等于0，到等于100％，动画在完成后重置... - Hello

Answer 5

很抱歉，在你的情况下无法保留动画结果。您在悬停时绑定了动画，并尝试在用户从您的元素中模糊鼠标时保留它。但是有能力通过点击来保持动画。 点击事件使用 :target 完成

- Vicky