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>