Facutz Facutz - 1 year ago 98
HTML Question

CSS animation not working on span with animate.css

I have a

and a
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):

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

function controlTotal($scope) {

$scope.zero = false;

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

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


Answer Source

From 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.

Change it to:

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