無法讓css動畫工作

我一直在嘗試很多工作以獲得一些CSS動畫。我做這工作得很好但使用了「左」的財產，也是一個不透明度動畫這個（我發現了互聯網，並試圖用），它仍然沒有奏效：無法讓css動畫工作

 @-webkit-keyframes slideInLeft { 
     0% { 
     -webkit-transform: translateX(-100%); 
     transform: translateX(-100%); 
     visibility: visible; 
     } 
     100% { 
     -webkit-transform: translateX(0); 
     transform: translateX(0); 
     } 

     } 
     @keyframes slideInLeft { 
     0% { 
     -webkit-transform: translateX(-100%); 
     transform: translateX(-100%); 
     visibility: visible; 
     } 
     100% { 
     -webkit-transform: translateX(0); 
     transform: translateX(0); 
     } 


    #about h1 { 
     display:block; 
     font-family:Montserrat, Verdana, sans-serif; 
     text-align:left; 
     color:ghostwhite; 
     font-size:50px; 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
     -webkit-animation-duration: 1s; 
     animation-duration: 1s; 
     -webkit-animation-fill-mode: both; 
     animation-fill-mode: both; 
    } 


    #about p { 
     display:block; 
     font-family:Verdana, sans-serif; 
     text-align:left; 
     color:whitesmoke; 
     font-size:17.5px; 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
     -webkit-animation-duration: 1s; 
     animation-duration: 1s; 
     -webkit-animation-fill-mode: both; 
     animation-fill-mode: both; 
    } 

    #prev-work h1 { 
     display:block; 
     font-family:Montserrat, Verdana, sans-serif; 
     text-align:left; 
     color:rgba(39,39,39,1); 
     font-size:50px; 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
     -webkit-animation-duration: 1s; 
     animation-duration: 1s; 
     -webkit-animation-fill-mode: both; 
     animation-fill-mode: both; 
    } 


    #prev-work p { 
     display:block; 
     font-family:Verdana, sans-serif; 
     text-align:left; 
     color:rgba(39,39,39,1); 
     font-size:17.5px; 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
     -webkit-animation-duration: 1s; 
     animation-duration: 1s; 
     -webkit-animation-fill-mode: both; 
     animation-fill-mode: both; 
    } 

section { 
    top:100%; 
    width:100%; 
    height:100%; 
} 
section .mid { 
    position:absolute; 
    top:100%; 
    width:100%; 
    min-height:100%; 
    background-color:#272727; 
}

HTML

<section> 
    <div class="mid"> 
     <div class="margin-90"> 
     <div id="about"> 
      <h1>Title...</h1> 
      <p>Text... 
      </p> 

     </div> 
     </div> 
    </div> 

    </section>

站點鏈接：http://vividstudios.x10.mx/

來源

2016-06-13 xen

我沒有看到所用的'left'財產的任何地方出現，請你張貼不工作的代碼？ – Harry

https://jsfiddle.net/rrwgxzq0/ ...這只是一個錯字...你在最後一個@ @ keyframes聲明後錯過了一個'}'......投票關閉 – DaniP

是的，我刪除了左邊的那個 – xen