将两个动画与纯CSS结合

Question

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

我尝试在标签中添加两个单独的CSS类，并且仅创建一个类来处理这两个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

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

ng-form

您可以浏览here来了解这种方法。希望有帮助！