Html data os动画：动画输入然后输出？

我正在尝试合并一些文本，这些文本在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中实现这一点（我想），但我正在努力避免它，因为它确实不是我的强项

---

提前谢谢你。

你在找这种东西吗。为此，我使用了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@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关键帧和动画。使用关键帧可以很容易地实现您想要的效果。要清楚，您是否有任何文档说明仅使用数据属性就可以产生这种效果？我从来没有听说过没有某种图书馆来支持它。您可能需要查看css关键帧和动画。你想要的东西很容易用关键帧实现。这正是我想要的，谢谢。在研究CSS关键帧大约一个小时后，我自己创造了一些类似的东西（不像你的那么优雅）。谢谢你的帮助！正是我想要的，谢谢。在研究CSS关键帧大约一个小时后，我自己创造了一些类似的东西（不像你的那么优雅）。谢谢你的帮助！