html - 纯CSS结合两个动画

Question

我正在尝试将两个动画平滑地组合在一起，以使我网站首页上的标题淡入淡出并向上滑动，然后向左滑动，使两个动画左对齐而不是居中对齐。尝试这样做时，我遇到了两个动画同时运行或一个运行在另一个之上的问题。

我曾尝试在标签中添加两个单独的 CSS 类，并只创建一个来处理这两个类。我相信创建两个 slideLeftTop 和 slideLeftBottom 会更有效地工作，因为文本在底部更长，最终目标是让这两个左对齐，而不是它们在开始时如何居中对齐。

@-webkit-keyframes slideLeftTop{
  0% {
    -webkit-transform: translate3d(0,100%,0);
  }
  100% {
    -webkit-transform: translateX(-20%)
  }
}

https://jsfiddle.net/k2tvur84/1/

我希望标题淡入淡出，停顿 3 秒，然后向左滑动约 40% 的页面。

Answer 1

您可以将所有更改与关键帧结合起来。 这是你想要的吗？

.animated {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    -ms-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
  }
  25% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  70% { -webkit-transform: translate3d(0,100%,0);}
  100% {    -webkit-transform: translateX(-20%)}
}

可以看看here对于这种方法。希望有所帮助!