html - 数据操作系统动画 : Animation in and then out?

Question

我正在尝试合并一些文本，这些文本会在 3 秒后弹回，停留几秒钟然后缩小。我以为我可以做到这一点:

<section class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="3s" data-os-animation="zoomOutDown" data-os-animation-delay="1s">
    <p id="helper">Filler Text</p>
</section>

但显然我不能，我该怎么做呢？

是否需要 JQuery - 我确实知道如何在 JQuery 中执行此操作(我认为)，但我试图避免使用它，因为它确实不是我的强项。

提前谢谢你。

Answer 1

你在找这种东西吗？为此，我使用了 CSS @keyframes，而不是 JQuery。

见下文:

<!-- custom fonts - DON'T NEED FOR THE EFFECT --> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600,600italic,300,700' rel='stylesheet' type='text/css'>
<!-- custom fonts - DON'T NEED FOR THE EFFECT -->

    <div class="main-content">
      <span class="bounced-word anim_1">Bounce then leave</span>
     </div>

CSS:

@import "compass/css3";
body {
  background: black;
  color: white;
}
.main-content {
  height: 100vh;
  position: relative;
  text-align: center;
  width: 100%;
}

.main-content .bounced-word {
  color: #56baff;
  display: block;
  font-family: "Titillium Web";
  font-size: 22px;
  font-weight: 600;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 230px;
  transform: translate3d(0, -200px, 0);
  width: 100%;
}
.main-content .anim_1 {
  animation: 2s bounced-word infinite, 8s hide infinite;
}

@keyframes bounced-word {
  8% {
    transform: translate3d(0, -45px, 0) scaleY(0.4);
    transform-origin: left bottom 0;
  }
  25% {
    transform: translate3d(0, -110px, 0) scaleY(1.4);
  }
  40% {
    transform: translate3d(0, 0, 0) scaleY(0.6);
    transform-origin: left bottom 0;
  }
  50% {
    transform: translate3d(0, 0, 0) scaleY(1.2);
    transform-origin: left bottom 0;
  }
  60% {
    transform: translate3d(0, 0, 0) scaleY(1);
    transform-origin: left bottom 0;
  }
  80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes hide {
  0%, 24% {
    visibility: visible;
  }
  25%, 50% {
    visibility: hidden;
  }
  50%, 75% {
    visibility: hidden;
  }
  75%, 100% {
    visibility: hidden;
  }
}

这可以在这里看到:https://jsfiddle.net/billy_farroll/y27hkq8y/