CSS 3 |水平滑动动画

Posted 2023-03-06

【中文标题】CSS 3 |水平滑动动画

【英文标题】：CSS 3 | horizontal slide animation

【发布时间】：2021-09-26 23:02:21

【问题描述】：

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

我想要的动画是这样的：

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

目前这是我的代码，但不能正常工作，但不能按我的意愿工作：

.col-sm-12width: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-1animation-name: anim-1;
#textComAz .item-2animation-name: anim-2;
#textComAz .item-3animation-name: anim-3;
#textComAz .item-4animation-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>

谢谢

【参考方案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>