CSS-анимация не работает на span с animate.css

Question

У меня есть <button> и <span> внутри вкладки. Я хочу добавить классы animate.css для прокрутки при наведении курсора на кнопку. Я использую угловые, чтобы включить их.

Это не работает в хроме (это действительно работает в 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> 

Answer 1

Использование display:inline-block; с размаху:

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

Animate.css GitHub:

Исторически элементы span не могут быть анимированы с помощью CSS. Чтобы оживить их, вам нужно предоставить им свойство отображения. Очевидно отображение: block; даст вам нежелательные эффекты, поэтому назначение дисплея: встроенный блок будет лучшим выбором и решить проблему.

Answer 2

Вот что Вам нужно сделать:

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