关于css3中@keyframes在火狐浏览器下的兼容问题（我是来提问的）

来源：互联网发布：淘宝直通车怎么操作编辑：程序博客网时间：2024/06/05 22:31

先贴代码

<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title>Keyframes介绍</title>    <style>        @keyframes changeColor {            0% {                margin-left: 100px;                background: green;            }            40% {                margin-left: 150px;                background: orange;            }            60% {                margin-left: 75px;                background: blue;            }            100% {                margin-left: 100px;                background: red;            }        }        @-moz-keyframes changeColor {            0% {                margin-left: 100px;                background: green;            }            40% {                margin-left: 150px;                background: orange;            }            60% {                margin-left: 75px;                background: blue;            }            100% {                margin-left: 100px;                background: red;            }        }        @-webkit-keyframes changeColor {            0% {                margin-left: 100px;                background: green;            }            40% {                margin-left: 150px;                background: orange;            }            60% {                margin-left: 75px;                background: blue;            }            100% {                margin-left: 100px;                background: red;            }        }                div {            width: 100px;            height: 100px;            background: red;            color: #fff;        }                div:hover {            /*-webkit-animation:changeColor 5s ease 0.1s;            -moz-animation:changeColor 5s ease 0.1s;*/            animation:changeColor 5s ease 0.1s;        }    </style></head><body>    <div>鼠标放在我的身上</div></body></html>

上面的代码在chrome下没有问题，但是在firefox下似乎@keyframes没有用，加了前缀还是一样。

求解！

对了，百度时有人说可能是firefox版本太低的原因，我的firefox自动更新，有新的版本一定会安装的。所以应该可以排除浏览器版本的问题。

0 0