Reputation: 2184
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.
Upvotes: 3
Views: 838
Reputation: 2184
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);
}
Upvotes: 0
Reputation: 5745
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>
Upvotes: 1