Why animate.css only works on DIV elements

Question

I use the animate.css library for a long time and it works great but today I found out that it does not work with SPAN or any other element which is not a DIV. Does anyone know the reason and how do I fix it?

Check the really simple example below (code is below):

https://jsfiddle.net/214gdyrw/

When you open the link above you can see that AAA and CCC animate automatically (on page load), however bbb does not. The only difference is that one is div and other is span. How can I make the span also animate?

<!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>

It's the display option, use `display:block` or `display:inline-block` on the `span`/`a` tags - https://jsfiddle.net/andyjh07/1estv24a/ — Andy Holmes, Nov 06 '18 at 16:36

CHEWX · Accepted Answer · 2018-11-06T16:42:17.453

0

Add display: inline-block on the span.

This will fix you issue.

Element needs to have block behaviour, not inline.

edited Nov 06 '18 at 16:42

answered Nov 06 '18 at 16:35

CHEWX

308
2
9

`inline-block` is inline level, not block level. – Alohci Nov 06 '18 at 16:39
I dont find anywhere on documentation about that, amazing. – Samul Nov 06 '18 at 16:39
@Alohci inline-block worked, I have no idea why. – Samul Nov 06 '18 at 16:40
@Samul - Sure, the solution is fine - it's the explanation that's flawed. – Alohci Nov 06 '18 at 16:41
@Alohci EFA.... – CHEWX Nov 06 '18 at 16:43

Why animate.css only works on DIV elements

1 Answers1