Facutz Facutz - 10 months ago 40
HTML Question

Animate.css not working in chrome

I have a button and a span inside a tab. I want to add animated.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). Here's the div with the button and the span and the script.

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



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>