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

时间:2016-03-20 01:37:07

标签: html css css3 css-animations

我想实现最终的CSS动画效果,如图B所示。 enter image description here

这是我的代码: 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)从整个句子的左侧反弹。

第二次发生正常,但是对于第一次,每个单词都会同时发生淡入淡出,而不是从左到右!如何解决这个问题。为它编写的代码但不起作用。如何解决这个问题?

1 个答案:

答案 0 :(得分: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>

请注意,这仅适用于一行文字,而且我没有包含反弹动画。