1.介绍
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 div{ 6 width: 200px; 7 height: 200px; 8 background-color: #5aff61; 9 10 /*添加动画效果*/ 11 /*1.animation-name: 指定动画名称;*/ 12 animation-name: moveTest; 13 /*2.设置动画的总耗时*/ 14 animation-duration: 2s; 15 /*3.设置动画的播放次数，默认1次，可以指定具体指，可以指定：infinite：无限次：*/ 16 /*animation-iteration-count: infinite;*/ 17 /*4.设置交替动画 alternate:来回交替*/ 18 /*animation-direction: alternate;*/ 19 /*5.设置动画延迟*/ 20 animation-delay: 2s; 21 /*6.设置动画结束时的状态：默认情况下，动画完毕之后回到原始状态 22 forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立即进行到动画的初识状态 23 backwards:不会保留动画结束时的装填，在添加了动画延迟的前提下，如果动画有初识状态，那么会立即进行到初识状态 24 both:会保留动画结束时的支行太，在添加了动画延迟的情况下也会立即进入到动画的初始状态 25 */ 26 animation-fill-mode: both; 27 28 /*6.动画的时间函数*/ 29 animation-timing-function: linear; 30 31 /*7.设置动画的播放状态： paused：暂停 running:播放*/ 32 animation-play-state: running; 33 } 34 35 /*创建动画*/ 36 @keyframes moveTest { 37 /*百分比是指整个动画耗时的百分比*/ 38 0%{/*可以写：from{}*/ 39 transform: translate(0,0) rotate(60deg); 40 } 41 50%{ 42 transform: translate(0,500px); 43 } 44 100%{/*可以写:to{}*/ 45 transform: translate(500px,800px); 46 } 47 }
2.添加播放、暂停开关
1 <input type="button" value="播放" id="play"> 2 <input type="button" value="暂停" id="pause"> 3 <script> 4 var div = document.querySelector("div"); 5 document.querySelector("#play").onclick = function () { 6 div.style.animationPlayState="running"; 7 } 8 document.querySelector("#pause").onclick = function () { 9 div.style.animationPlayState="paused"; 10 } 11 </script>