• 暂停和播放CSS3动画的两种实现方法


    1,直接修改animationPlayState

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                background-color: #ff0000;
                position: absolute;
                animation:mymove 4s 1;
                -moz-animation:mymove 4s 1; /* Firefox */
                -webkit-animation:mymove 4s 1; /* Safari and Chrome */
                -o-animation:mymove 4s 1; /* Opera */
    
                -webkit-animation-fill-mode: forwards ;
                -animation-fill-mode: forwards ;
            }
            @keyframes mymove {
                from {top: 0}
                to {top: 100px}
            }
            @-webkit-keyframes mymove {
                from {top: 0}
                to {top: 100px}
            }
        </style>
    </head>
    <body>
    <div id="nice">nice</div>
    <script>
        var nice = document.getElementById("nice");
    
        var prefixs = ["","o","moz","webkit"],
                div = document.createElement("div"),
                computeStyle,
                prefixAnimationPlayState;
        //获取所支持的animationPlayState,IE6,7,8不支持CSS3,就不写currentStyle的兼容代码了
        computeStyle = window.getComputedStyle(document.documentElement,"");
        prefixs.forEach(function(key){
            var prefix =  !key ? "animationPlayState" : key + "AnimationPlayState";
            if(typeof computeStyle[prefix] == "string")
                prefixAnimationPlayState = prefix;
        })
    
        setTimeout(function(){
            nice.style[prefixAnimationPlayState] = "paused";
        },1000);
    
        setTimeout(function(){
            nice.style[prefixAnimationPlayState] = "running";
        },2000);
    </script>
    </body>
    </html>

     

    2,修改class

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                background-color: #ff0000;
                position: absolute;
                animation:mymove 4s 1;
                -moz-animation:mymove 4s 1; /* Firefox */
                -webkit-animation:mymove 4s 1; /* Safari and Chrome */
                -o-animation:mymove 4s 1; /* Opera */
    
                -webkit-animation-fill-mode: forwards ;
                -animation-fill-mode: forwards ;
            }
            @keyframes mymove {
                from {top: 0}
                to {top: 100px}
            }
            @-webkit-keyframes mymove {
                from {top: 0}
                to {top: 100px}
            }
    
            .paused{
                -webkit-animation-play-state: paused!important;
                -moz-animation-play-state: paused!important;;
                -o-animation-play-state: paused!important;;
                -animation-play-state: paused!important;;
            }
    
            .running{
                -webkit-animation-play-state: running!important;;
                -moz-animation-play-state: running!important;;
                -o-animation-play-state: running!important;;
                -animation-play-state: running!important;;
            }
        </style>
    </head>
    <body>
    <div id="nice">nice</div>
    <script>
        var nice = document.getElementById("nice");
    
        vardiv = document.createElement("div");//通过修改class暂停
        setTimeout(function(){
            nice.className = "paused";
        },1000);
    
        setTimeout(function(){
            nice.className = "running";
        },2000);
    </script>
    </body>
    </html>
  • 相关阅读:
    让我们一起Go(八)
    让我们一起Go(七)
    让我们一起Go(六)
    VTemplate模板引擎的使用入门篇
    超时时间已过或服务器未响应的解决方法
    SQL Server 2005使用BCP命令将数据表导出到Excel第一行包括表头
    VTemplate模板引擎的使用进阶篇
    VTemplate模板引擎的使用认识篇
    免费开源的模板引擎VTemplate
    .NET 4.5 中新提供的压缩类
  • 原文地址:https://www.cnblogs.com/geilishu/p/5427936.html
Copyright © 2020-2023  润新知