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加上帧动画属性
本文著作权归作者 [ admin ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
