3

Here's a demo:

http://codepen.io/Tiger0915/pen/GgjVLN

I've got a keyframe animation on hover of the .circle div. It works correctly when you hover over it.

@include keyframes(bounce-bulge) {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(.75);
  }
  80% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(1.5);
  }
}


.circle {
  transition: all 300ms ease;

  &:hover {
    @include animation(bounce-bulge 500ms forwards);
  }
}

I want to reverse the effect of the keyframe whenever you stop hovering over the element.

Is this possible with just CSS?

Joshua Soileau
  • 2,933
  • 9
  • 40
  • 51

1 Answers1

0

Look at my example, if this is correct what you want (Someone will invent more elegant solution)

http://codepen.io/Mardzis/pen/YPGmmq

CSS (SASS):

@include keyframes(bounce-bulge) {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(.75);
  }
  80% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(1.5);
  }
}

@include keyframes(bounce-bulge-back) {
  100% {
    transform: scale(1);
  }
  80% {
    transform: scale(.75);
  }
  20% {
    transform: scale(1.75);
  }
  0% {
    transform: scale(1.5);
  }
}


.circle {
  margin: 100px auto 0;
  width: 30px;
  height: 30px;

  border: 10px solid blue;
  border-radius: 50%;
  background: lightblue;
  cursor: pointer;

  transition: all 300ms ease;
  @include animation(bounce-bulge-back 500ms forwards);

  &:hover {
    @include animation(bounce-bulge 500ms forwards);
  }
}
Mardzis
  • 760
  • 1
  • 8
  • 21