css完成后保留动画

例如，我将比例从1变为2，并且当它缩放为2时，例如在用户将其缩放后的某个图像悬停时，它会保持不变，这是可能的吗？css完成后保留动画

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

来源

2013-04-25 Hello

没有必要把'-MS-transform'成'@ -webkit-keyframes'。 – Pavlo 2013-04-25 12:25:21

使用this.I认为它会工作。我只给你所需的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; 
}

来源

2013-04-25 11:41:59

我没有看到任何区别，从等于0，并等于100％，动画完成后重置... – Hello 2013-04-25 11:44:08

是的，这就是我的意思，你可以尝试％值。 – 2013-04-25 11:47:15

不幸的是它不工作 – Hello 2013-04-25 11:53:01

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

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

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

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

来源

2013-04-25 12:13:50 holamon

恐怕是不可能保持动画的结果你的情况。您在悬停时绑定动画，并在用户将鼠标从元素上模糊时尝试保留该动画。但有能力让点击动画。 click event is done with :target

来源

2013-04-25 12:17:07 Vicky

使用animation-fill-mode：forwards或both

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

来源

2014-04-03 06:22:47 emn178

使用此：

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

来源

2017-03-06 18:49:08

css完成后保留动画

回答

相关问题