爲什麼不這個CSS3動畫運行？

Question

這是我第一次自己寫一個CSS3動畫，我剛剛打開了頁面，它沒有運行。

唯一的影響是動畫fallB被應用到的東西，即消失，但處於相同的位置。

動畫應用到的其他元素沒有任何反應。

我在做什麼錯？

這裏是我的代碼：

.animated{ 
     -moz-transform: translate(0,0); 
     -webkit-transform: translate(0,0); 
     transform: translate(0,0); 
     -moz-transform3d: translate(0,0,0); 
     -webkit-transform: translate3d(0,0,0); 
     transform: translate3d(0,0,0); 
    } 
    .animated.fallA{ 
     -moz-animation: fallA 1s forwards ease-in-out; 
     -webkit-animation: fallA 1s forwards ease-in-out; 
     animation: fallA 1s forwards ease-in-out; 
    } 
    .animated.fallB{ 
     -moz-animation: fallB 1s forwards ease-in-out; 
     -webkit-animation: fallB 1s forwards ease-in-out; 
     animation: fallB 1s forwards ease-in-out; 
    } 
    .animated.fallC{ 
     -moz-animation: fallC 1s forwards ease-in-out; 
     -webkit-animation: fallC 1s forwards ease-in-out; 
     animation: fallC 1s fowards ease-in-out; 
    } 
    .animated.fallD{ 
     -moz-animation: fallD 1s forwards ease-in-out; 
     -webkit-animation: fallD 1s forwards ease-in-out; 
     animation: fallD 1s forwards ease-in-out; 
    } 
    .animated.fallE{ 
     -moz-animation: fallE 1s forwards ease-in-out; 
     -webkit-animation: fallE 1s forwards ease-in-out; 
     animation: fallE 1s forwards ease-in-out; 
    } 
    @-moz-keyframes fallA{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      left:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      left:0; 
     } 
    } 
    @-webkit-keyframes fallA{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      left:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:-300px; 
      left:-400px; 
     } 
    } 
    @keyframes fallA{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      left:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:-300px; 
      left:-400px; 
     } 
    } 
    @-moz-keyframes fallB{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      left:-200px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      left:0; 
     } 
    } 
    @-webkit-keyframes fallB{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      left:-200px; 
     } 
     100%{ 
      opacity:0.0; 
      top:0; 
      left:0; 
     } 
    } 
    @keyframes fallB{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      left:-200px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      left:0; 
     } 
    } 
    @-moz-keyframes fallC{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-100px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
     } 
    } 
    @-webkit-keyframes fallC{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-100px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
     } 
    } 
    @keyframes fallC{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-100px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
     } 
    } 
    @-moz-keyframes fallD{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      right:-200px; 
     } 
     100%{ 
      opacity:1.0; 
      top:-200px; 
      right:-200px; 
     } 
    } 
    @-webkit-keyframes fallD{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      right:-200px; 
     } 
     100%{ 
      opacity:1.0; 
      top:-200px; 
      right:-200px; 
     } 
    } 
    @keyframes fallD{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-200px; 
      right:-200px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      right:0; 
     }   
    } 
    @-moz-keyframes fallE{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      right:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      right:0; 
     } 
    } 
    @-webkit-keyframes fallE{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      right:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      right:0; 
     } 
    } 
    @keyframes fallE{ 
     0%{ 
      position:relative; 
      opacity:0.0; 
      top:-300px; 
      right:-400px; 
     } 
     100%{ 
      opacity:1.0; 
      top:0; 
      right:0; 
     } 
    } 

Answer 1

你的地方需要一個固定的點上的關鍵幀位置是根據你的HTML標記。如果一切都是position:relative沒有基點來動畫的東西來回/從。假設你在這裏與safari一起工作，因爲你的@-webkit-keyframes fallB有opacity:0.0這是其他然後你的@-moz-keyframes fallB設置說。意味着在Firefox中你應該看到class="animated fallB"不會消失。

和頂部的提示。如果您製作關鍵幀動畫，請嘗試先在一個瀏覽器樣式中對其進行編碼，然後將其應用於其他瀏覽器代碼。你會感到困惑，或許你犯了錯誤，如果很多CSS值被定義爲具有相同的視覺效果。

你會看到一些成功，如果你把.animated { position:absolute; ..到你的CSS