我有一些从右到左的滚动文本，它们会在动画结束时传送回原点，而我更希望它消失并出现在边缘。
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
color: white;
line-height: 50px;
animation: example1 10s linear infinite;te
}
@keyframes example1 {
from {
margin-left: 60%;
width: 300%;
}
to {
margin-left: 35%;
width: 100%;
}
}
body {
background-color: black;
}
<div class="example1">
<h3>text</h3>
</div>
如果你需要你的 CSS 动画只运行一次，你必须设置 animation-iteration-count属性设置为 1(实际上，根本不设置它，因为 1 是它的默认值)。
您目前正在使用 animation 速记将其设置为 infinite，这会在一个声明中设置多个动画属性。只需从该行中删除 infinte 即可。您还应该删除该声明后的 te，这是无效的 CSS。
要让您的动画为多个属性设置动画，您可以向关键帧添加尽可能多的可设置动画的属性，它们将相应地设置动画。在您的情况下，添加一个 50% 关键帧和 opacity:1 并将 opacity:0 添加到 to 关键帧将使您的元素从 1 淡出到 0 从动画的一半开始直到结束。
使用 animation-timing-function ，特别是 timing functions (又名缓动)，允许为动画添加加速和减速，使它们看起来更“自然”，尤其是在用于运动动画时。
CSS 动画的另一个方便的属性是 animation-fill-mode .它允许在动画结束时将动画属性设置为它们已被动画化的值(而不是重置为任何应用的 CSS)。每当您将属性设置为与通常适用于它的值不同的值时，这就避免了“跳转”。
最后一点，关于性能:为了确保您的动画在任何设备上流畅运行，您应该只为不会触发后续元素重绘的属性设置动画。事实上，您应该努力只对 2 个属性设置动画:transform 和 opacity。在你的情况下，而不是动画 margin-left，它移动你的元素并触发重新绘制 DOM 中的后续元素，你不应该实际移动它并使用 transform 来绘制它在不同的位置。
这是一个示例(不确定这是否是您所要求的，但您可以进一步尝试):
body {
overflow-x: hidden;
background-color: #212121;
}
.example1 h3 {
color: white;
font-size: 3rem;
margin: 0;
line-height: 50px;
animation: example1 5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes example1 {
from{
transform: translateX(107%);
}
38% {
opacity: 1;
}
42% {
transform: translateX(35%);
}
60% {
opacity: 0;
transform: translateX(35%);
}
62% {
transform: translateX(0);
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="example1">
<h3>text</h3>
</div>
相反，如果您希望动画循环但只想在结束和开始之间创建一个平滑的过渡，那么黄金法则是在 from 和 to 中动画属性的关键帧必须具有相同的值(因为 transform:translateX() 的默认值为 0 而 opacity 的默认值为 1，我不需要在 from 中设置它们 - 这是起点):
body {
overflow-x: hidden;
background-color: #212121;
}
.example1 h3 {
color: white;
text-align:right;
padding-right: 1rem;
font-size: 3rem;
margin: 0;
line-height: 50px;
animation: example1 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes example1 {
38% {
opacity: 1;
}
42% {
transform: translateX(-60%);
}
58% {
opacity: 0;
transform: translateX(-60%);
}
62% {
transform: translateX(0);
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="example1">
<h3>text</h3>
</div>
有关动画语法和示例的更多信息，我推荐 MDN ，一个精心策划的文档库，Mozilla、谷歌、微软和许多其他公司的共同努力。可以说，它最有用的功能是链接，在底部的规范部分，目前正在为各自的属性或方法应用标准，因此您不必浪费时间自己跟踪它们。