如何在淡入和现有变换后制作另一个变换动画

Question

我有一个具有淡入和转换(翻译(动画的文本，所以在淡入和变换动画之后，我想要一个像lite一样上下移动的文本，而不是像等待加载那样在无限循环中移动太多

.imgContaner {
width: 100%;
height: 86.6vh;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/85/Sky-3.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.imgContaner p {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
text-align: center;
text-shadow: -1px 0 #000000, 1px 0 #000000, 0 1px #000000, 0 -1px #000000;
animation: 4s ease-in-out test ;
opacity: 1;  
}
@keyframes test {
from {   
transform: translate(-50% , 400%);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;  
}
}

<div className={classes.imgContaner}>
<p>Make Your Dreams Come True</p>
</div>

Answer 1

使用css可以通过两种方式实现这一点。第一种方法：在@keyframe定义中添加更多帧。不要使用from和to属性，而是使用百分比。例如：

@keyframes test {
0% {   
transform: translate(-50% , 400%);
opacity: 0;
}
50% {
transform: translate(-50%, -50%);
opacity: 1;  
}
75% {
Do other stuff...
}
100% {
Do other stuff...
}
}

第二种方式：将动画链接到另一个之后播放。通过将延迟添加到与第一个动画的持续时间相等的第二个动画。类似：

animation: test 4s ease-in-out, otherAnim 2s ease-in-out 4s;

注意，你不能这样做：

animation: test 4s ease-in-out;
animation: otherAnim 2s ease-in-out 4s;

这样，第一个将被第二个覆盖。这不是你想要的。