html - 使用CSS从左到右淡入句子的所有单词

Question

我想实现最终的 CSS only 动画效果，如图 B 所示。

这是我的代码: http://codepen.io/catch_up/pen/bpqexg?editors=1100

HTML

    <div class='programming my-anim-parent'>
      <span class='my-anim'>Hello!</span>
      <span class='my-anim'>How</span></span>
      <span class='my-anim'>Are</span></span>
      <span class='my-anim'>You </span></span>
  <span class='my-anim'>People.</span>
      <span class='my-anim'>I</span>
  <span class='my-anim'>Learn</span>
    </div>

CSS

.programming {
  font-size: 48px;
    position: absolute;
  top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  white-space: nowrap;
}

.programming span:nth-of-type(1) {
    animation-delay: 0.3s;
}
.programming span:nth-of-type(2) {
    animation-delay: 0.6s;
}
.programming span:nth-of-type(3) {
    animation-delay: 0.9s;
}
.programming span:nth-of-type(4) {
    animation-delay: 1.2s;
}
.programming span:nth-of-type(5) {
    animation-delay: 1.5s;
}
.programming span:nth-of-type(6) {
    animation-delay: 1.8s;
}
.programming span:nth-of-type(7) {
    animation-delay: 2.1s;
}

.my-anim-parent {
    animation: L2RslideBounce 2.9s ease-in-out;
    visibility: visible !important;
}

.my-anim {
    animation: L2RAppear 2s, fadeIn 0.8s linear backwards;
    visibility: visible !important;
}

/*FOR BOUNCING SENTENCE */
@keyframes L2RslideBounce {
  0% {
        transform: translate(-60%,-50%);
    } 
  50%{
    transform: translate(-40%,-50%);
  }
    100% {
        transform: translate(-50%,-50%);
    }
}

/*I think this is not working properly! Words are fading in all at once not from left to right. Can also be checked by putting long word.*/
/*EACH WORD SHOULD APPEAR LEFT TO RIGHT*/
@keyframes L2RAppear {
  0% {
    width: 0%;
    }
    100% {
    width: 100%;
    }
}

/*FADING IN*/
@keyframes fadeIn {
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1;
    }
}

这是两个东西的叠加:

1)每个词从左到右淡入。

2) 整个句子从左到右弹跳。

第二个发生的很好，但是对于第一个，每个单词同时发生褪色，而不是从左到右!!如何解决这个问题。为它编写的代码但不起作用。如何解决这个问题？

Answer 1

与其尝试为每个单词组合一个复杂的序列，不如用一个元素覆盖文本并使用渐变使它们淡入。

我整理了一个片段，大致可以满足我认为您正在寻找的内容:

#container {
  position: relative;
  left: 0;
  transition: left 1s ease-in-out;
  width: 300px;
}
#container:before {
  content: 'hover over me!';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to left,
    yellow 0%,
    yellow 50%, /* the difference between this one */
    transparent 60%, /* and this one is half fade "softness" */
    transparent 100%) no-repeat no-repeat;
  background-size: 200%;
  background-position: 100%;
  transition: background-position 1s ease-out;
}
#container:hover {
  /* This part can be replaced with the bounce animation */
  left: 100px;
}
#container:hover:before {
  content: '';
  /* 
  Move the background position such that it hides the gradient entirely
  since we scaled it up, this will bedouble the difference between the second and third gradient colours
  */
  background-position: -20%;
}

<div id="container">
  This is some text to fade in
</div>

请注意，这只适用于一行文本，而且我没有包含弹跳动画。