keyframes优先级-webkit-

田

发布于 2021-11-08 10:01:56

3970

发布于 2021-11-08 10:01:56

文章被收录于专栏：IT杂症

css3中有动画属性这个2012年的时候就有了。但是那时候的浏览器版本不统一，很多时候写css3需要加前缀才可以.

-moz-,-webkit-, keyframes
需要加这些前缀才可

不过随着手机移动的发展，在中国程序员偏向于chrome和firefox两大阵营。加前缀是小气的象征，为了不被诟病，各大浏览器开始妥协。其实也是一种规则的遵守而已！大家都遵守这样即可，约定俗成的东西。今天我徒弟问了一个问题，在我以往的项目经验中不曾遇到过。我把代码贴出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <style type="text/css">
            .d1{width:200px;
            height:200px;
            border:1px solid  #333;
            }
            .d1:hover{
                             
                -webkit-animation-name:change;
                -webkit-animation-duration:5s;
                -webkit-animation-timing-function: linear;
            }


                @keyframes change{
         

                }
    
             @-webkit-keyframes change{
                
                0%{
                    margin-left:0px ;
                    margin-top:0px;
                    background-color:blue;
                }
                    25%{
                    margin-left:200px ;
                    margin-top:0px;
                    background-color:yellow;
                }
                    50%{
                    margin-left:200px;
                    margin-top:200px;
                    background-color:red;
                }
                    75%{
                    margin-left:0px ;
                    margin-top:200px;
                    background-color:green;
                }
                    100%{
                    margin-left:0px ;
                    margin-top:0px;
                    background-color:blue;
                }
            }
     


        

        </style>
    </head>
    <body>
        <div class="d1" id="d1">
            
        </div>
    </body>
</html>

按道理应该执行动画的，safari下可以执行动画效果，可惜在chrome下不执行，使我马上想到了优先级！！！都是时代的错误造成的，不是什么大问题！当然解决问题的方法有很多种，改帧动画名，撤销一个属性等……或者是给@keyframes change加上帧动画属性

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017年07月11日，如有侵权请联系 cloudcommunity@tencent.com 删除

chrome