html - 无法让 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.将 top:100% 更改为 top:0; on section & section .mid in css

抱歉英语不好:(