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。那是倒计时。
答案 0 :(得分：0)
将以下属性添加到元素类（.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>