html - 动画没有完全结束

问题描述

我有一个文本幻灯片，但它在完全滑动之前完成，带有文本的元素是位置：绝对和左侧：100%。我在其中应用了一个动画，从左：100％到左：-100％，预计所有元素都会从右边移出>>从左边移出，这实际上发生了，但在总数之前发生位移，滑动结束。

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif
}

.news-wrapper {
	height: 50px;
	position: relative;
	overflow: hidden;
	font-size: 25px;
	padding: 10px 0 0
}

.news-wrapper .footer-item {
	display: flex;
	color: #ffffff;
	background-color: rebeccapurple;
	list-style: none;
	left: 100%;
	position: absolute;
	animation: sliding 20s linear;
	white-space: nowrap
}

.news-item {
	margin-right: 100vw
}

.news-item:last-child {
	margin: 0
}

@keyframes sliding {
	100% {
		left: -100%
	}
}

<div class="news-wrapper">
  <ul class="footer-item">
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
    <li class="news-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. At, maxime?</li>
  </ul>
</div>

标签： htmlcss

100% 指父 div（相对 div）

您没有将文本移动得足够远。在您的滑动动画中，拥有left: 0;和transform: translateX(-100%);

看到这个小提琴

html - 动画没有完全结束

问题描述

解决方案

推荐阅读