不能让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.将顶部：100％更改为顶部：0; 部分＆amp; css中的.mid 部分

抱歉英语不好:(