h5-动画基本介绍

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>