时间戳

首页 > 解决方案 > 为什么 animate.css 仅适用于 DIV 元素

html - 为什么 animate.css 仅适用于 DIV 元素

问题描述

我使用该animate.css库很长时间并且效果很好，但今天我发现它不适用于SPAN或任何其他不是DIV. 有谁知道原因以及我该如何解决？

检查下面的非常简单的示例（代码如下）：

https://jsfiddle.net/214gdyrw/

当您打开上面的链接时，您可以看到它AAA并CCC自动制作动画（在页面加载时），但bbb不会。唯一的区别是一个是div，另一个是span。我怎样才能使span也动画？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

</head>

<body>

    <div class="animated bounce">AAA</div>

    <span class="animated bounce">bbb</span>

    <div class="animated bounce">CCC</div>

</body>
</html>

标签： htmlcss

解决方案

添加display: inline-block在span.

这将解决您的问题。

元素需要具有块行为，而不是内联。

推荐阅读