CSS 动画 - 隐藏文本直到页面加载

Question

我有 css 动画，但问题是当页面加载时文本是可见的，然后是动画。我想要它，这样文本在动画显示到屏幕上之前是不可见的。我的例子在这里，任何帮助将不胜感激。

.text-reveal {
  margin: 0;
  text-align: center;
  font-size: 200px;
  overflow: hidden;
  line-height: 1;
}
    .oneReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
       }
    .twoReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s;
        }
    .threeReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s;

      }


@keyframes "reveal" {
  0% {
    transform: translate(0,100%);
    visibility: hidden;
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
    visibility: visible;
    opacity: 1;
  }
}

    <div class="container">
        <h1 class="text-reveal">
            <span class="oneReveal">reveal</span>
                    
        </h1>
                 <h1 class="text-reveal">
            <span class="twoReveal">reveal</span>
                    
        </h1>
                
                 <h1 class="text-reveal">
            <span class="threeReveal">reveal</span>
                    
        </h1>
    </div>

Answer 1

您可以保留 %，只添加“转发”和隐藏可见性。

    .text-reveal {
    margin: 0;
    text-align: center;
    font-size: 200px;
    overflow: hidden;
    line-height: 1;
}

.oneReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}

.twoReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s forwards;
}

.threeReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}


@keyframes reveal {
    from {
    transform: translate(0,100%);
    opacity: 0;}

    to {
        transform: translate(0,0);
        visibility: visible;
        opacity: 1;
    }
}`enter code here`

    <div class="container">
        <h1 class="text-reveal">
            <span class="oneReveal">reveal</span>
                    
        </h1>
                 <h1 class="text-reveal">
            <span class="twoReveal">reveal</span>
                    
        </h1>
                
                 <h1 class="text-reveal">
            <span class="threeReveal">reveal</span>
                    
        </h1>
    </div>

CSS 动画 - 隐藏文本直到页面加载

CSS Animation - hide the text until the page loads

css

sass

css-animations