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完成後保留動畫

回答

相關問題