CODEWITHSUNDEEP
csscss-animations
Kevin Bourassa-Houle
Kevin Bourassa-Houle

Reputation: 130

CSS not transitioning smoothly in and out of animation

What's missing for the div to transition smoothly in and out of the pulse animation?

https://jsfiddle.net/86gxLy2a/

CSS

div {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid black;
  transform: scale(.5);
  transition: all .3s ease-in-out;
}

div:hover {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  from, to {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
}

Upvotes: 0

Views: 297

Answers (2)

abney317
abney317

Reputation: 8492

You can delay the animation and scale up on hover

Update: Working smoothly in Chrome now as well. Only issue now is that the unpulse animation will run on page load.

div {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid black;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -ms-transform: scale(.5);
  -o-transform: scale(.5);
  transform: scale(.5);
  transition: all .3s ease-in-out;
  animation: unpulse .3s;
}

div:hover {
  transform: scale(1);
  animation: pulse 1s infinite;
  animation-delay: .3s;
}

@keyframes pulse {
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
  }
}

@keyframes unpulse {
  0% {
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
  }
  100% {
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    transform: scale(.5);
  }
}
<div>  
</div>

Upvotes: 2

k.cornett
k.cornett

Reputation: 189

Your div's scale needs to be equal to the animations initial scale to appear smooth

transform: scale(1); - DIV

transform: scale(1); - Animation first keyframe

div {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid black;

  transform: scale(1);
  transition: all .3s ease-in-out;
}

div:hover {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  from, to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
  }
}
<div>  
</div>

Upvotes: 0

Related Questions