CODEWITHSUNDEEP
javascriptjquerycsscss-transitionsanimate.css
Madan Bhandari
Madan Bhandari

Reputation: 2184

transform rotate() not working with Animate.css

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

Upvotes: 3

Views: 838

Answers (2)

Madan Bhandari
Madan Bhandari

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

P. Frank
P. Frank

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

Related Questions