纯CSS3跑马灯动画

PS: 其实最重要的一点就是要形成闭环

别说话, 线上DEMO

一共分四个节点

拿红色来说, 0, -100 100 0

拿黄色来说: -100 0 100 -100

灰色点区域是展示区域,

一摸一样的子元素复制一份, 就是红色跟黄色,

重要的事情说三遍: 要闭环, 要闭环

最终结果, 请在交易虎, 代练商品买家聊天页面查看, 哈哈

<div class="parent">
  <div class="child child-0"></div>
  <div class="child child-1"></div>
</div>

.parent {
  width: 200px;
  height: 100px;
  background-color: gray;
  position: relative;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.child {
  width: 300px;
  height: 100px;
  animation: 10s linear infinite;
  position: absolute;
  opacity: .9
}
.child-0 {
  background-color: red;
  animation-name: carousel0;
}
.child-1 {
  background-color: yellow;
  animation-name: carousel1;
  transform: translateX(100%);
}
@keyframes carousel0 {
  form {
    transform: translateX(0);
  }
  49.99% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes carousel1 {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(0);
  }
  99.99% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}