Facutz Facutz - 1 year ago 72
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;


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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download