Menu
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>
473
By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name. Below, try removing the comments around animation-duration to fix the animation.
CSS properties that define animation parameters such as animation-direction and animation-name are not animatable because animating them would create complex recursive behavior.
Setting multiple animation property valuesThe CSS animation longhand properties can accept multiple values, separated by commas. This feature can be used when you want to apply multiple animations in a single rule and set different durations, iteration counts, etc., for each of the animations.
In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.
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.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
