Question

我正在尝试学习CSS动画，而我无法弄清楚并且无法在网络上找到的一件事就是如何设置正确的持续时间。

我试图让我的网站响应，因此字体大小会根据视图的大小而改变。到目前为止，我有以下代码：

@media screen { 
.EntranceDiv{
    top: 40%;
    position: relative;
}

h1 {
    font-size: 4rem;
    margin: 0px;
}

.helloworld{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #D9FAFF; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .8em;
    display: inline-block;
    animation: 
    typing initial steps(30, end),
    blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #D9FAFF }
  }
@keyframes typing {
    from { width: 0 }
    to { width: 65% }
  }
}

我的问题是，随着字体大小的变化，动画要么太长也要太短，然后整个事情就会弹出屏幕。为响应动画设置持续时间的好方法是什么

Answer 1

这里的主要问题是您设置的宽度是相对于父容器的，因此它与您的inline-block元素的内容无关。您需要找到一种方法来正确设置元素的宽度。

由于你无法转换到width:auto，这里有一个想法，我复制内容，我使用一个绝对位置的伪元素。第一个内容将定义宽度并将被隐藏，第二个内容将是可见的，我可以使用左/右属性拉伸以适合定义的宽度：

h1 {
  font-size: 4rem;
  margin: 0px;
}

.helloworld {
  letter-spacing: .8em;
  display: inline-block;
  position:relative;
  visibility:hidden;
  white-space: nowrap;
}
.helloworld:after {
  content:attr(data-content);
  display:block;
  visibility:visible;
  overflow: hidden;
  white-space: nowrap;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:100%;
  border-right: .15em solid #D9FAFF;
   animation: typing 2s steps(30, end) forwards, blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: #D9FAFF
  }
}

@keyframes typing {
  from {
    right:100%
  }
  to {
    right: 0%
  }
}


}

<h1 data-content="lorem" class="helloworld">
  Lorem
</h1>
<h1 data-content="lor" class="helloworld">
  Lor
</h1>
<h1 data-content="lorem ipsume" class="helloworld">
  Lorem ipsume
</h1>

CSS动画 - 设置响应动画的持续时间

1 个答案: