xxxxxxxxxx<html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div{ width:100px; height:100px; background:red; position:relative; animation:mymove 2s 2; /* Safari、Chrome 和 Opera */ animation:mymove 2s 1;}@keyframes mymove{ from {left:0px;} to {left:200px;}}/* Safari、Chrome 和 Opera */@-webkit-keyframes mymove { from {left:0px;} to {left:200px;}}</style></head><body><p>点击“尝试一下”按钮，让 DIV 元素在动画完成时保持最后一个关键帧设置的样式：to {left:200px;}。</p><button onclick="myFunction()">尝试一下</button><script>function myFunction(){document.getElementById("myDIV").style.animationFillMode = "forwards";// 针对 Chrome、Safari 和 Opera 的代码document.getElementById("myDIV").style.WebkitAnimationFillMode = "forwards";}</script><p><strong>注意：</strong>针对 Firefox 用户：请确保在动画完成之前点击按钮，否则将不会产生任何效果，因为动画一旦完成不会重新开始。</p><p><strong>注意：</strong>只有 Firefox 支持 animationFillMode 属性。</p><div id="myDIV"></div></body></html>