无法让css动画工作

Question

我一直在尝试很多工作以获得一些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/

Answer 1

1.Plz添加关键帧2日闭括号（}）。 右括号是主要问题！

2.Change top：100％ to top：0;上部分&部分.MID在CSS

对不起，我的英语不好:(