用纯 CSS 组合两个动画

Question

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

我尝试在标签中添加两个单独的 CSS 类，并且只创建一个来处理这两个 's.我相信创建两个 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这个方法。希望有所帮助！