h5-动画基本介绍

1.介绍

*{
            margin: 0;
            padding: 0;
        }
        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>