變換旋轉（）不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>