動畫css3不適用於Firefox和IE

css動畫不適用於Firefox和Internet Explorer。使用Safari和Chrome。你有好主意嗎？謝謝！動畫css3不適用於Firefox和IE

<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。這是倒計時。

來源

2014-02-12 user3299678

以下屬性添加到您的元素類（.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>

來源

2014-02-12 03:55:16

偉大的！謝謝！ – user3299678

動畫css3不適用於Firefox和IE

回答

相關問題