javascript - 在 html (jquery) 中动画化文本的一部分

标签 javascript jquery css animate.css impress.js

目标很简单->

假设我有一句话:

“这对我来说是个特别的日子……”

我希望“Special”这个词具有动画效果(小弹跳)。

这是我尝试过的(我正在使用 impress.js + animate.css)。

index.html:

<html>
<head>
    ...
</head>

<body class="impress-not-supported">

<div id="impress">

    <div id="first_slider" class="step slide" data-x="-1000" data-y="-1500">
        <h3 style="display: inline">This is a</h3> <h3 class="xxxxx_bounce" style="display: inline">special</h3> <h3 style="display: inline">day for me</h3>
    </div>
</div>

<script src="js/impress.js"></script>
<script>
    impress().init();

    $('#first_slider').on('impress:stepenter', function() {
        $(this).find("h3.xxxxx_bounce").addClass('animated bounce');
    });
</script>

</body>
</html>

我希望整个句子都在同一行，所以我添加了“显示:内联”部分。

这在 chrome 中工作正常，但在 safari 中，“特殊”一词根本不会弹出。

如果我删除“special”一词的 display: inline 部分，那么它在 chrome 和 safari 中都可以正常工作。 (但是句子不会再在同一行了)

所以它看起来像代码: