0

I want to make a circle, where you can hover over it and then it change from picture 1 to 2. I can do that, but when the transition is finished it goes back to the .circle class, instead of staying at second picture.

  1. So is there anyway to make it stay at second picture, as long as im still having my mouse over the picture.

  2. Is there also a way to make it change from second to first picture, when i remove my mouse from it ?

.circle{
  width: 250px;
  height: 250px;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%;
  background: #333333;
  box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -moz-box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -webkit-box-shadow: 10px 10px rgba(0,0,0,0.4); 
  -o-box-shadow: 10px 10px rgba(0,0,0,0.4);}
}

.circle-:hover{
  -webkit-animation: second 2s; /* Chrome, Safari, Opera */
  animation: second 2s;
}

@-webkit-keyframes second {
  from {background: url("../images/circle-picture1");}
  to {background: url("../images/circle-picture2");}
}
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Casper
  • 125
  • 1
  • 1
  • 9
  • You'll want to use JavaScript to add a class to the element permanently, then apply the transition to that new class instead of `:hover`. – Blazemonger Aug 20 '14 at 15:04
  • If you have to use CSS only, you could use very long time values : http://stackoverflow.com/a/17101357/2168947 – Brewal Aug 20 '14 at 15:17

1 Answers1

1

Add animation-fill-mode: forwards; and its prefixed variants to your .circle:hover class.

This causes the target to "retain the computed values set by the last keyframe encountered during execution."

More info on MDN

quw
  • 2,844
  • 1
  • 26
  • 35