CODEWITHSUNDEEP
animationcss
SamB
SamB

Reputation: 3313

CSS 3 eases out without ease-out

http://jsfiddle.net/wX6eU/

The rotation eases in and out even though I don't specify the out parameter. How can I make it stay at 360 or just go back to 0 without any animation?

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-transition:-webkit-transform 0.5s ease-in;
}
div:hover {
    -webkit-transform:rotate(360deg);
}

Upvotes: 0

Views: 2084

Answers (2)

methodofaction
methodofaction

Reputation: 72465

Just place the transition within the :hover pseudo-selector:

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
}
div:hover {
    -webkit-transform:rotate(360deg);
    -webkit-transition:-webkit-transform 0.5s ease-in;
}

http://jsfiddle.net/DgBDt/

Upvotes: 1

coreyward
coreyward

Reputation: 80140

I don't believe it's possible to set the timing on the "out" differently than the "in". The ease-in option is the timing function. Other options are default, linear, ease-out, ease-in-out, and cubic-bezier. You can read more about them here, but there isn't any information on setting the transition-out to zero seconds, unfortunately.

An alternate option might be to use JS to get the functionality you want and still use the CSS animation:

$(function(){
  var timer;
  $('.animated').hover(function(){
    timer = setTimeout(function(){ $('.animated').removeClass('animated') }, 500)
  }, function(){
    clearTimeout(timer);
    $(this).addClass('animated');
  });
 });

Upvotes: 0

Related Questions