变换旋转（）不Animate.css

Question

工作变换：旋转（）工作不animate.css但它不与animate.css工作

这里是代码：

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"); 
}); 

编辑

动画在拨弄没有工作，但旋转（）工作。意思是两者不能一起工作。

Demo at Fiddle

Answer 1

我发现这另一种解决方案，但它不是确切的，因为我的期望。它运作良好，仍然在等待好的答案。

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); 
} 

Answer 2

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

好吧，我发现，为什么不工作。有必要添加正确的animate.css文件：https://daneden.github.io/animate.css/animate.min.css

立即尝试。做工精致

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