transform rotate() not working with Animate.css

Question

transform : rotate() is working without animate.css but its not working with animate.css

here is code :

HTML

<div id="fresh">FRESH</div>

CSS

#fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}

jQuery

$(document).ready(function(){
    $('#fresh').addClass("animated tada");
});

EDIT

Animation not working in fiddle but rotate() is working. Means both not working together.

Demo at Fiddle

Answer 1

UPDATE 1

 $(document).ready(function(){ $('#fresh').addClass("animated tada"); }); 

 #fresh{ position : absolute; background-color : #cf2c2c; width: 38px; padding-left: 2px; color: #ffffff; border-radius: 5px; -ms-transform: rotate(-37deg); -webkit-transform: rotate(-37deg); transform: rotate(-37deg); right: 113px; bottom: 40px; font-size: 10px; z-index : 9999; } 

 <link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fresh">FRESH</div> 

Ok i have found why is not working. It is necessary to add the correct animate.css file : https://daneden.github.io/animate.css/animate.min.css

Try it now. Is working fine

UPDATE 2

  $(document).ready(function(){ finish =0; AnimateRotate("-37"); function AnimateRotate(angle) { // caching the object for performance reasons var $elem = $('#fresh'); // we use a pseudo object for the animation // (starts from `0` to `angle`), you can name it as you want $({deg: 0}).animate({deg: angle}, { duration: 500, step: function(now) { // in the step-callback (that is fired each step of the animation), // you can use the `now` paramter which contains the current // animation-position (`0` up to `angle`) $elem.css({ transform: 'rotate(' + now + 'deg)' }); }, complete: function() { if(finish!=1) $('#fresh').addClass("animated tada"); } }); }; $('#fresh').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $('#fresh').removeClass(); finish=1; AnimateRotate("-37"); }); }); 

 #fresh{ position : absolute; background-color : #cf2c2c; width: 38px; padding-left: 2px; color: #ffffff; border-radius: 5px; -ms-transform: rotate(-37deg); -webkit-transform: rotate(-37deg); transform: rotate(-37deg); right: 113px; bottom: 40px; font-size: 10px; z-index : 9999; } 

 <link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fresh">FRESH</div> 

Answer 2

I found another solution for this but it's not the exact as I expect. It works well, still waiting for good answer.

HTML

<div class="rotate37i">
        <div id="fresh">FRESH</div>
    </div>

CSS

   #fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}
.rotate37i {
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);  
}