时间戳

首页 > 解决方案 > 用纯 CSS 组合两个动画

html - 用纯 CSS 组合两个动画

问题描述

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

我尝试在标签中添加两个单独的 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% 的页面。

标签： htmlcsscss-animations

解决方案

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

.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%)}
}

您可以在这里查看这种方法。希望有帮助！

推荐阅读