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>