如何淡入淡出每一个词都有一点延迟来制作一个很棒的标题

Question

我想在我的网站上做一个标题，它会像这个网站上的那样动画：https://www.thisisbeyond.com/what-we-believe/ 所以我希望每个词 fade-up 都有一点延迟。我怎么能那样做？如果只用 css 就可以了，那就太好了。但是 javascript 也是可以接受的:)

我试过将我的每个单词分成一列，然后为这些列设置动画（不透明度：0 到 1 过渡），但它会导致单词之间出现奇怪的间距，我希望它们 fade-up，不仅改变不透明度。所以我认为正确的做法是将每个单词放在不同的 span 元素中，然后为 span 设置动画。

<h1 class="animated2">
<span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span> 
<span class="highlight">humanity&nbsp;</span>
<span class="highlight">in</span> 
<span class="highlight">business.</span>
</h1>

LINK 到我正在努力实现的网站：michalkuczek.pl

.highlight{
    background: #fff;
}
@keyframes fadeInUpSmall{
    0%{
        opacity:0;
        transform:translateY(10px)}
    100%{
        opacity:1;
        transform:translateY(0)}
}

.animated2 span:nth-child(1) {
    animation-delay: .1s;
}

.animated2 span {
    animation-name: fadeInUpSmall;
}
.animated2 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-fill-mode: both;
}

Answer 1

您可以通过创建定义开始和结束状态的关键帧来实现不透明度动画。

CSS:

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

HTML:

<h1 class="animated2">
    <span>To</span> <span>show</span> <span>the</span> <span>power</span> <span>of</span>
    <span class="highlight fade-in one">humanity&nbsp;</span>
    <span class="highlight fade-in two">in</span> 
    <span class="highlight fade-in three">business.</span>
</h1>

如何淡入淡出每一个词都有一点延迟来制作一个很棒的标题

How to fadeup words each with a little delay to make a great headline

javascript

css

wordpress

elementor