Question

我最近开始尝试学习CSS动画，我正在尝试制作类似打字机的效果。虽然效果很有效，但我想知道如何在页面加载后几秒钟启动动画，但仍然显示文本不可见（宽度：0）。我尝试了几件事情，包括将第一个动画制作两倍的长度，但是在50％的关键帧标记之前表示宽度为零，但是它使动画变得非常不稳定并且在文本的一部分开始。我也尝试将不透明度设置为0直到第一个关键帧，但这似乎也没有用。任何帮助将不胜感激！

.type1{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;


    -webkit-animation: type 3s steps(40, end);
    -webkit-animation-delay: 3s;
    animation: type 3s steps(40, end);
    animation-delay: 3s;
}



@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

.type2{
    width: 20em;
    white-space:nowrap;
    overflow:hidden;

    -webkit-animation: type 2s steps(40, end);
    -webkit-animation-delay: 4.8s;
    animation: type 2s steps(40, end);
    animation-delay: 4.8s
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

<div class= "jumbotron jumbotron-fluid">
     <div id="mainpage" class= "container">
      <h1>Tim</h1>
      <p class="type1">I am the current CEO of Apple</p>
      <p class="type2">and I love movies</p>
      
     </div>
    </div>

Answer 1

＆＃13;

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {

    $(".type1").addClass("text-animation").removeClass("hide");
    $(".type2").addClass("text-animation").removeClass("hide");

  }
}

＆＃13;

.type1 {
  width: 20em;
  white-space: nowrap;
  overflow: hidden;
}

.hide {
  display: none !important;
}

.text-animation {
  -webkit-animation: type 3s steps(40, end);
  -webkit-animation-delay: 0s;
  animation: type 3s steps(40, end);
  animation-delay: 0s
}

@keyframes type {
  from {
    width: 0
  }
}

@-webkit-keyframes type {
  from {
    width: 0
  }
}

.type2 {
  width: 20em;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes type {
  from {
    width: 0
  }
}

@-webkit-keyframes type {
  from {
    width: 0
  }
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid">
  <div id="mainpage" class="container">
    <h1>Tim</h1>
    <p class="type1 hide">I am the current CEO of Apple</p>
    <p class="type2 hide">and I love movies</p>

  </div>
</div>

＆＃13;

您只需稍后调用动画即可。当页面完全加载所有脚本和CSS时，我做到了。如果需要，您还可以使用setTimeout()功能设置定时器延迟。

在CSS动画之前使元素不可见

1 个答案: