动画 css3 不适用于 Firefox 和 IE

【问题标题】：animation css3 not working with Firefox and IE动画 css3 不适用于 Firefox 和 IE
【发布时间】：2014-02-12 11:55:16
【问题描述】：

css 动画不适用于 Firefox 和 Internet Explorer。使用 Safari 和 Chrome。你有想法吗 ？谢谢！

<html>
<head>
<style> 
body{
width:100%;
height:100%;}




@-webkit-keyframes un {
0%, 25%{ right: 50%;  opacity:1}
50% { right:0;  opacity:1}
51% { right:50%;  opacity:1}
75% { right:100%; opacity:1 }
76%, 100% {opacity:0;}
}
@-moz-keyframes un {
0%, 25%{ right: 50%;  opacity:1;}
50% { right:0;  opacity:1;}
51% { right:50%;  opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
@-o-keyframes un {
0%, 25%{ right: 50%;  opacity:1;}
50% { right:0;  opacity:1;}
51% { right:50%;  opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
@keyframes un {
0%, 25%{ right: 50%;  opacity:1;}
50% { right:0;  opacity:1;}
51% { right:50%;  opacity:1;}
75% { right:100%; opacity:1 ;}
76%, 100% {opacity:0;}
}
.un{
    top:45%;
    font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: un 4s; /* Safari 4+ */
-moz-animation:    un 4s; /* Fx 5+ */
-o-animation:      un 4s; /* Opera 12+ */
animation:         un 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}

@-webkit-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%;  opacity:1;}
25%, 50%{ right: 50%;  opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
@-moz-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%;  opacity:1;}
25%, 50%{ right: 50%;  opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
@-o-keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%;  opacity:1;}
25%, 50%{ right: 50%;  opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
@keyframes deux {
0% {right:50%;opacity:1;}
24%{ right: 100%;  opacity:1;}
25%, 50%{ right: 50%;  opacity:1;}
75% { right:0%; opacity:1; }
76%, 100% {opacity:0;}
}
.deux{
    top:45%;
    font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: deux 4s; /* Safari 4+ */
-moz-animation:    deux 4s; /* Fx 5+ */
-o-animation:      deux 4s; /* Opera 12+ */
animation:         deux 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}

@-webkit-keyframes trois {
0%{ right:50%;  opacity:1;}
24% { right:0%;  opacity:1;}
25% { right:50%;  opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%;  opacity:1;}
76%, 100% {opacity:0;}
}
@-moz-keyframes trois {
0%{ right:50%;  opacity:1;}
24% { right:0%;  opacity:1;}
25% { right:50%;  opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%;  opacity:1;}
76%, 100% {opacity:0;}
}
@-o-keyframes trois {
0%{ right:50%;  opacity:1;}
24% { right:0%;  opacity:1;}
25% { right:50%;  opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%;  opacity:1;}
76%, 100% {opacity:0;}
}
@keyframes trois {
0%{ right:50%;  opacity:1;}
24% { right:0%;  opacity:1;}
25% { right:50%;  opacity:1;}
50% { right:100%; opacity:1 ;}
51%, 75%{ right:50%;  opacity:1;}
76%, 100% {opacity:0;}
}
.trois{
    top:45%;
    font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: trois 4s; /* Safari 4+ */
-moz-animation:    trois 4s; /* Fx 5+ */
-o-animation:      trois 4s; /* Opera 12+ */
animation:         trois 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}

@-webkit-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
@-moz-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
@-o-keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
@keyframes zero {
0%, 75%{right:50%; opacity:0;}
76%, 99% { right:50%; opacity:1 }
100% {opacity:0;right:50%;}
}
.zero{
    top:45%;
    font-size:40px;
text-align:center;
position:absolute;
-webkit-animation: zero 4s; /* Safari 4+ */
-moz-animation:    zero 4s; /* Fx 5+ */
-o-animation:      zero 4s; /* Opera 12+ */
animation:         zero 4s; /* IE 10+ */
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;}
.compte{
    position:fixed;
    height:100%;
    width:100%;
    overflow:hidden;
    background-color:black;
    color:white;
    z-index:-9999;
}



</style>
</head>
<body>
<div class="compte">
<div class="un">3</div>
<div class="deux">2</div>
<div class="trois">1</div>
<div class="zero">0</div></div>


</body>
</html>

谢谢！这是一个已知的错误？难道我做错了什么？动画 css3 不适用于 Firefox 和 IE。这是倒计时。

【问题讨论】：

    标签： css firefox animation


    【解决方案1】：

    将以下属性添加到您的元素类（.un、.deux 等）：

    右：0；

    例如：

    .un {
                top: 45%;
                font-size: 40px;
                text-align: center;
                position: absolute;
                right: 0;
                -webkit-animation: un 4s;
                -moz-animation: un 4s;
                -o-animation: un 4s;
                -ms-animation: un 4s;
                animation: un 4s;
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                -ms-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }

    完整的 HTML：

    <html>
    <head>
        <title></title>

        <style type="text/css">
            body {
                width: 100%;
                height: 100%;
            }




            @-webkit-keyframes un {
                0%, 25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 0;
                    opacity: 1;
                }

                51% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 100%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @-moz-keyframes un {
                0%, 25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 0;
                    opacity: 1;
                }

                51% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 100%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @-o-keyframes un {
                0%, 25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 0;
                    opacity: 1;
                }

                51% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 100%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @keyframes un {
                0%, 25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 0;
                    opacity: 1;
                }

                51% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 100%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            .un {
                top: 45%;
                font-size: 40px;
                text-align: center;
                position: absolute;
                right: 0;
                -webkit-animation: un 4s;
                -moz-animation: un 4s;
                -o-animation: un 4s;
                -ms-animation: un 4s;
                animation: un 4s;
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                -ms-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }

            @-webkit-keyframes deux {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 100%;
                    opacity: 1;
                }

                25%, 50% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 0%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @-moz-keyframes deux {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 100%;
                    opacity: 1;
                }

                25%, 50% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 0%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @-o-keyframes deux {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 100%;
                    opacity: 1;
                }

                25%, 50% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 0%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @keyframes deux {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 100%;
                    opacity: 1;
                }

                25%, 50% {
                    right: 50%;
                    opacity: 1;
                }

                75% {
                    right: 0%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            .deux {
                top: 45%;
                font-size: 40px;
                text-align: center;
                position: absolute;
                right: 0;
                -webkit-animation: deux 4s;
                -moz-animation: deux 4s;
                -o-animation: deux 4s;
                -ms-animation: deux 4s;
                animation: deux 4s;
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                -ms-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }

            @-webkit-keyframes trois {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 0%;
                    opacity: 1;
                }

                25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 100%;
                    opacity: 1;
                }

                51%, 75% {
                    right: 50%;
                    opacity: 1;
                }

                76%, 100% {
                     opacity: 0;
                }
            }

            @-moz-keyframes trois {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 0%;
                    opacity: 1;
                }

                25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 100%;
                    opacity: 1;
                }

                51%, 75% {
                    right: 50%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @-o-keyframes trois {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 0%;
                    opacity: 1;
                }

                25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 100%;
                    opacity: 1;
                }

                51%, 75% {
                    right: 50%;
                    opacity: 1;
                }

                76%, 100% { opacity: 0; }
            }

            @keyframes trois {
                0% {
                    right: 50%;
                    opacity: 1;
                }

                24% {
                    right: 0;
                    opacity: 1;
                }

                25% {
                    right: 50%;
                    opacity: 1;
                }

                50% {
                    right: 100%;
                    opacity: 1;
                }

                51%, 75% {
                    right: 50%;
                    opacity: 1;
                }

                76%, 100% {
                     opacity: 0;

                }
            }

            .trois {
                top: 45%;
                font-size: 40px;
                vertical-align: 50%;
                position: absolute;
                right: 0;
                -webkit-animation: trois 4s;
                -moz-animation: trois 4s;
                -ms-animation: trois 4s;
                -o-animation: trois 4s;
                animation: trois 4s;
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -ms-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }

            @-webkit-keyframes zero {
                0%, 75% {
                    right: 50%;
                    opacity: 0;
                }

                76%, 99% {
                    right: 50%;
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                    right: 50%;
                }
            }

            @-moz-keyframes zero {
                0%, 75% {
                    right: 50%;
                    opacity: 0;
                }

                76%, 99% {
                    right: 50%;
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                    right: 50%;
                }
            }

            @-o-keyframes zero {
                0%, 75% {
                    right: 50%;
                    opacity: 0;
                }

                76%, 99% {
                    right: 50%;
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                    right: 50%;
                }
            }

            @keyframes zero {
                0%, 75% {
                    right: 50%;
                    opacity: 0;
                }

                76%, 99% {
                    right: 50%;
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                    right: 50%;
                }
            }

            .zero {
                top: 45%;
                font-size: 40px;
                right: 0;
                text-align: center;
                position: absolute;
                -webkit-animation: zero 4s;
                -moz-animation: zero 4s;
                -o-animation: zero 4s;
                -ms-animation: zero 4s;
                animation: zero 4s;
                -webkit-animation-timing-function: ease-in;
                -moz-animation-timing-function: ease-in;
                -o-animation-timing-function: ease-in;
                -ms-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
            }

            .compte {

                height: 100%;
                width: 100% ;
                overflow: hidden;
                background-color: black;
                color: white;
                z-index: -9999;

            }
        </style>
    </head>
    <body>
    <div class="compte">
        <div class="un">3</div>
        <div class="deux">2</div>
        <div class="trois">1</div>
        <div class="zero">0</div>
    </div>


</body>
</html>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2014-06-13
      • 2015-07-29
      • 2013-03-11
      • 2015-11-30
      • 2014-05-20
      • 2014-02-07
      • 1970-01-01
      • 2016-06-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode