h5-动画基本介绍

1.介绍

 *{
             margin:;
             padding:;
         }
         div{
             width: 200px;
             height: 200px;
             background-color: #5aff61;

             /*添加动画效果*/
             /*1.animation-name: 指定动画名称;*/
             animation-name: moveTest;
             /*2.设置动画的总耗时*/
             animation-duration: 2s;
             /*3.设置动画的播放次数，默认1次，可以指定具体指，可以指定：infinite：无限次：*/
             /*animation-iteration-count: infinite;*/
             /*4.设置交替动画  alternate:来回交替*/
             /*animation-direction: alternate;*/
             /*5.设置动画延迟*/
             animation-delay: 2s;
             /*6.设置动画结束时的状态：默认情况下，动画完毕之后回到原始状态
             forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立即进行到动画的初识状态
             backwards:不会保留动画结束时的装填，在添加了动画延迟的前提下，如果动画有初识状态，那么会立即进行到初识状态
             both:会保留动画结束时的支行太，在添加了动画延迟的情况下也会立即进入到动画的初始状态
             */
             animation-fill-mode: both;

             /*6.动画的时间函数*/
             animation-timing-function: linear;

             /*7.设置动画的播放状态：  paused：暂停   running:播放*/
             animation-play-state: running;
         }

         /*创建动画*/
         @keyframes moveTest {
             /*百分比是指整个动画耗时的百分比*/
             0%{/*可以写：from{}*/
                 transform: translate(0,0) rotate(60deg);
             }
             50%{
                 transform: translate(0,500px);
             }
             100%{/*可以写:to{}*/
                 transform: translate(500px,800px);
             }
         }

2.添加播放、暂停开关

 <input type="button" value="播放" id="play">
 <input type="button" value="暂停" id="pause">
 <script>
     var div = document.querySelector("div");
     document.querySelector("#play").onclick = function () {
         div.style.animationPlayState="running";
     }
     document.querySelector("#pause").onclick = function () {
         div.style.animationPlayState="paused";
     }
 </script>