CSS3 animation - changing words to infinity without rewind

问题

It's my first time experimenting with css3 animations and I have a question regarding the following setup:

Link to codepen

After item3 the animation rewinds to item1. I wonder if it's possible to let follow the item1 after the item3 without this rewinding, so that item3 also moves to the top and item1 slides in from the bottom again, and so on and on?

HTML

<div id="change">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</div>

CSS

#change {
  overflow: hidden;
  height: 58px;
  color: black;
  font-size: 3em;
}

#change span {
  position: relative;
  display: block;
  animation: myAnim 10s ease infinite 0s;
  -webkit-animation: myAnim 10s ease infinite 0s;
}


@keyframes myAnim {
  0% { top: 0px; }
  20% { top: 0px; }
  35% { top: -58px; }
  55% { top: -58px; }
  70% { top: -116px; }
  90% { top: -116px; }
  100% { top: 0px; }
}

@-webkit-keyframes myAnim {
  0% { top: 0px; }
  20% { top: 0px; }
  35% { top: -58px; }
  55% { top: -58px; }
  70% { top: -116px; }
  90% { top: -116px; }
  100% { top: 0px; }
}

回答1:

Unfortunately, there doesn't seem to be an easy way to do this. If we were using an image, you could easily just take advantage of repeat and force the beginning of the element to start at the end of the element. However, since we aren't using an image, the only solution I can think of would be to use the first element as the last element.

UPDATED EXAMPLE HERE

HTML

<div id="change">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
  <span>item1</span> <!-- The first element is used as the last element-->
</div>

Modified CSS

@-webkit-keyframes myAnim {
  0% { top: 0; }
  20% { top: 0; }
  35% { top: -58px; }
  55% { top: -58px; }
  70% { top: -116px; }
  90% { top: -116px; }
  100% { top: -172px; }
}

回答2:

it didn't let me rest, so i figured out another solution. with no doubled item1, but the missing part in this is that it doesn't start with the item1 being already there at the beginning.

Link to codepen

HTML

<div id="change">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</div>

CSS

#change {
  overflow: hidden;
  height: 58px;
  color: black;
  font-size: 3em;
  position: relative;
}

#change span {
  position: absolute;
  display: block;
  animation: myAnim 9s ease infinite 0s;
  -webkit-animation: myAnim 9s ease infinite 0s;
}

#change span:nth-of-type(2) {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  top: 58px;
}

#change span:nth-of-type(3) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
  top: 58px;
}

@keyframes myAnim {
  0% { top: 58px;  }
  15% { top: 0px; }
  33% { top: 0px; }
  48% { top: -58px; opacity:1; }
  60% { top: -58px; opacity: 0; }
  80% { top: 58px; opacity: 0; }
  100% { top: 58px; opacity: 1; }
}

@-webkit-keyframes myAnim {
  0% { top: 58px;  }
  15% { top: 0px; }
  33% { top: 0px; }
  48% { top: -58px; opacity:1; }
  60% { top: -58px; opacity: 0; }
  80% { top: 58px; opacity: 0; }
  100% { top: 58px; opacity: 1; }
}

来源：https://stackoverflow.com/questions/22208700/css3-animation-changing-words-to-infinity-without-rewind

标签

css3

css-animations