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

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

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

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

请参阅此小提琴以获取示例：http://jsfiddle.net/8eHHL/

Answer 2

使用它。我认为它会起作用。我只提供你需要为所有人编写的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;
}

Answer 3

我担心在你的情况下保持动画效果是不可能的。您可以在悬停时绑定动画，并在用户从您的元素中模糊鼠标时尝试保留它。但是有能力保持动画片的点击。 click event is done with :target

Answer 4

使用animation-fill-mode：forwards或both

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

Answer 5

使用此：

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

css完成后保持动画

5 个答案: