I am using Animate.CSS and I am using the "hinge" effect to have an image fall off the screen. Works great in real browsers but of course not in IE 9 or below. Is there a way to make this effect work with jQuery or javascript? Or will I have to add a jQuery transition to fade the image out?
Thanks!
Code:
HTML
<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />
CSS
.fear{
position:absolute;
left:150px;
top:0px;
}
#animate {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
JS
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#animate').addClass('animated hinge');
});
Here is a fiddle I created showing the animation effect.
While not as smooth as the Animate.CSS Hinge effect I ended up using jQuery to make the image fall off the screen (well fall and fade out.)
I had help from CoreyRS and his answer and method can be found here.