参见英文答案 >
Stopping a CSS3 Animation on last frame5个答案我在分钟做一个CSS动画,在它我移动的东西,并希望它停留在结束位置,直到用户将鼠标移开。
body { background: url('osx.jpg'); padding: 0; margin: 0; line-height: 60px; } @-webkit-keyframes item1 { 0% { bottom: -120px; left: 0px; } 10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } 100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); } } @-webkit-keyframes item2 { 0% { bottom: -120px; left: 0px; } 10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } 100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); } } @-webkit-keyframes item3 { 0% { bottom: -120px; left: 0px; } 10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } 100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); } } div { position: relative; } #folder { width: 120px; margin: 0px auto; } #folder > div { position: absolute; } #folder:hover > div:nth-of-type(1) { -webkit-animation-name: item1; -webkit-animation-duration: 10s; } #folder:hover > div:nth-of-type(2) { -webkit-animation-name: item2; -webkit-animation-duration: 10s; } #folder:hover > div:nth-of-type(3) { -webkit-animation-name: item3; -webkit-animation-duration: 10s; }
每当动画结束,它只是重复自己。我只想让它发生一次,留在它的地方,直到用户离开。我尝试使用暂停的东西从规格,但它不工作,我期望它。任何帮助是赞赏。谢谢。 原文链接:https://www.f2er.com/css/221726.html