CSS animation not working on span with animate.css

Question

I have a <button> and a <span> inside a tab. I want to add animate.css classes to span when hover over button. I'm using angular to include them.

It doesn't work in chrome (it does work in ie):

<div>
    <button ng-mouseover="one()" ng-mouseleave="two()">Hover over me</button>
    <span ng-class="{animated : zero, bounce : zero}">Animate me</span>
</div>

<script>
    function controlTotal($scope) {

        $scope.zero = false;

        $scope.one = function () {
            $scope.zero = true;
        };

        $scope.three = function () {
            $scope.zero = false;
        };

    };
</script>

Jaqen H'ghar · Accepted Answer · 2016-07-13T21:17:08.137

30

Use display:inline-block; with the span:

<span style="display:inline-block;" 
    ng-class="{animated : zero, bounce : zero}">Animate me</span>

Animate.css GitHub:

Historically, span elements can't be animated with CSS. In order to animate them, you'll need to give them a display property. Obviously display: block; will give you undesirable effects, so assigning display: inline-block would be a better choice, and solve the issue.

edited Jul 13 '16 at 21:17

answered Jun 09 '16 at 16:00

Jaqen H'ghar

16,186
8
49
52

1

Thank you! It works perfectly. I didn't know that about spans. Always happy to learn new things. – Facutz Jun 09 '16 at 16:30

score 0 · Answer 2 · answered Jun 09 '16 at 16:16

0

Here is what You need to do:

<button ng-mouseover="one()" ng-mouseleave="two()">Hover over me</button>
<span style="display:inline-block" ng-class="{animated:zero,bounce :zero}">Animate me</span>

answered Jun 09 '16 at 16:16

Naman Kheterpal

1,810
1
9
16

CSS animation not working on span with animate.css

2 Answers2