CSS 3 |水平滑动动画

Question

我正在尝试仅使用 CSS 创建响应式水平滑动动画。

我想得到的动画是这样的：

唯一不同的是，我希望文本在容器中央暂停几秒钟，然后继续滚动

目前这是我的代码，但无法正常工作，但它无法正常工作：

.col-sm-12{width:100%;padding:15px;float:left;}

#textComAz .item-1, #textComAz .item-2, #textComAz .item-3, #textComAz .item-4 {position: absolute;display: block;top: 2em;width: 100%;font-size: 2em;animation-duration: 20s;animation-timing-function: ease-in-out;animation-iteration-count: infinite;text-align:center;}
#textComAz .item-1{animation-name: anim-1;}
#textComAz .item-2{animation-name: anim-2;}
#textComAz .item-3{animation-name: anim-3;}
#textComAz .item-4{animation-name: anim-4;}

@keyframes anim-1 {0%, 8.3% { left: -50%; opacity: 0; }8.3%,25% { left: 0%; opacity: 1; }33.33%, 100% { left: 25%; opacity: 0; }}

@keyframes anim-2 {0%, 33.33% { left: -50%; opacity: 0; }41.63%, 48.29% { left: 0%; opacity: 1; }56.66%, 100% { left: 25%; opacity: 0; }}

@keyframes anim-3 {0%,56.66% {left: -50%;opacity: 0;}64.96%,75.26% {left: 0%;opacity: 1;}83.26%,100% {left: 25%;opacity: 0;}}

@keyframes anim-4 {0%,83.26% {left: -50%;opacity: 0;}91.56%,95.86% {left: 0%;opacity: 1;}100%{left: 25%;opacity: 0;}}

<div id="textComAz" class="col-sm-12">
<p class="item-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p class="item-2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<p class="item-3">But I must explain to you how all this mistaken idea of denouncing pleasure.</p>

<p class="item-4">TEXT PROMO.</p>
</div>

谢谢

Answer 1

给你

html, body, .parent {
  overflow: hidden;
  width: calc(100vw - 16px);
}

.parent span {
  animation: move 7s linear 0s infinite;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
}

.second {
  margin-left: 820px;
}


@keyframes move {
  0% {
    transform: translate(0,0);
  }
  100% {
    transform: translate(-820px,0);
  }
}

<div class = 'parent'>
  <span class= 'first'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rhoncus velit, vel faucibus risus cursus commodo.
  </span>
  <span class= 'second'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rhoncus velit, vel faucibus risus cursus commodo.
  </span>
</div>

CSS 3 |水平滑动动画

CSS 3 | horizontal slide animation

html

css

animation

css-animations

css-transitions