[英]how make another transform animation after fade-in and existing transform?
hello I have a text which has fade-in and transform(translate) animation so after the fade-in and transform animation I want a moving text like up and down a lite, not too much in an infinite loop like you are waiting for loading of something您好,我有一个具有淡入和转换(翻译)animation 的文本,所以在淡入和转换 animation 之后,我想要一个像上下一样的移动文本,在无限循环中不要太多,就像你在等待加载一样东西
.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>
Blockquote
块引用
You can do this in two ways with css.您可以使用 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 以两种方式执行此操作。 First way: Add more frames in your @keyframes definition.
第一种方式:在您的 @keyframes 定义中添加更多帧。 Instead of using from and to properties, use percentages.
不要使用 from 和 to 属性,而是使用百分比。 For example:
例如:
@keyframes test {
0% {
transform: translate(-50% , 400%);
opacity: 0;
}
50% {
transform: translate(-50%, -50%);
opacity: 1;
}
75% {
Do other stuff...
}
100% {
Do other stuff...
}
}
Second way: Chain animations to play after the other one.第二种方式:在另一个之后播放连锁动画。 By adding delay to the second animation equal to the duration of first animation.
通过将延迟添加到第二个 animation 等于第一个 animation 的持续时间。 Like:
喜欢:
animation: test 4s ease-in-out, otherAnim 2s ease-in-out 4s;
Note that you can't do it this way:请注意,您不能这样做:
animation: test 4s ease-in-out;
animation: otherAnim 2s ease-in-out 4s;
This way first one will be overwriten by second one.这样第一个将被第二个覆盖。 Which is not what you want.
这不是你想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.