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

pcww981p 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(111)

我有一个文本，其中有淡入和转换（翻译）动画，所以在淡入和转换动画后，我想像上下建兴移动文本，而不是像你在无限循环太多的东西等待加载

.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>

css

来源：https://stackoverflow.com/questions/73117103/how-make-another-transform-animation-after-fade-in-and-existing-transform

1条答案

按热度按时间

68de4m5k1#

你可以用两种方式来实现这一点。第一种方式：在@keyframes定义中添加更多帧。使用百分比代替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;

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

赞(0）回复(0）举报 2023-03-24

我来回答

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

1条答案

相关问题

热门标签

最新问答