5

I making a button with animated img on it. So when you hover on, car goes from left, and stops in center. And when you hover out - car goes to right. I've made a fiddle: https://jsfiddle.net/ufwyjd0o/

.button{
  height:150px;
  width: 150px;
  background-color:#468189;
  margin: 100px;
  border-radius: 100%;
  box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6);
  animation: size 1.5s infinite alternate;
  position: relative;
}

@keyframes size {
    0%   {transform: scale(1.0);
          box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.6); }
    100% {transform: scale(1.05);
          box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4); }
}

.icon img{
  height:75px;
  width:auto;
  position: absolute;
  top: 40px;
  animation: driveout 1s cubic-bezier(.52,.02,.31,.99) both;
  transform: 1s;
}

@keyframes drive {
    0%   {transform: translate3d(-60px,0,0)}
    5%  {transform: translate3d(60px,0,0)}  
    10% {transform: translate3d(40px,0,0);}
}

@keyframes driveout {
    0%   {transform: translate3d(40px,0,0)} 
    100% {transform: translate3d(200px,0,0)}
}

.button:hover .icon img {
  animation: drive 10s  cubic-bezier(.52,.02,.31,.99) normal;
  animation-play-state: pause;
  display:block;
}
Maxim Brkn
  • 105
  • 9
  • The question is? You want the movement of the car to be an infinite loop? Or slowly move it back to the original position on hover out? It isn't very clear. – Harry Dec 04 '15 at 13:28
  • I want animation continues after hover out, and car goes to the right. And when you hover in and out fast, car flickers, and I need everything move smooth – Maxim Brkn Dec 04 '15 at 13:32
  • 1
    You should have a look at this - http://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533. Once the selector is no longer applicable, the animation won't execute further. It will stop abruptly and go to original position. In your case, once you hover out immediately, the animation (`driveout`) that is specified on the default state will start to get executed immediately. This is why you see the flickers. – Harry Dec 04 '15 at 13:35
  • Thank you. I know about transitions back, after hover out. But I need animation starts to play on hover (car starts to go right), pause when car stops in center, and when you hover out, animation continues and car drive to the right. And if you hover out before car stops, car must drive to the right without stopping and flickering. Maybe we gos some js way? – Maxim Brkn Dec 04 '15 at 13:39
  • Yes, JS would be the way to achieve it. If you are ok with a JS answer then I can try to come up with one. – Harry Dec 04 '15 at 13:42
  • Pure JS might be great too :) – Maxim Brkn Dec 04 '15 at 13:43
  • The problem is on hover, as it aborts the hover out animation and starts a new hover animation. Moving mouse fast over and out never really starts any hover out animation, it only restarts the hover animation, hence the flicker. So the question is, assuming on a hover it starts the animation and should always complete both of them, what should happen when the second hover happens and the animation chain is not done? ... Wait until the car is all the way to the right and then restart the first animation moving the car to the middle? – Asons Dec 04 '15 at 14:14
  • @LGSon: Actually there are two things. When you hover in and out quickly the animation doesn't complete (it jumps) and when you hover in again it restarts hover in animation. I think it might be better to use jQuery animations or something for this. It might become too complex to do with CSS. – Harry Dec 04 '15 at 14:22
  • 1
    @Harry Yes, script is needed, my question was to understand how that script needs to be done based on what OP wants. – Asons Dec 04 '15 at 14:24
  • Possible duplicate of [How do you detect when CSS animations start and end with JavaScript?](http://stackoverflow.com/questions/14796936/how-do-you-detect-when-css-animations-start-and-end-with-javascript) – Asons Dec 04 '15 at 14:32
  • @MaximBrkn Check [this duplicate post](http://stackoverflow.com/questions/14796936/how-do-you-detect-when-css-animations-start-and-end-with-javascript), it has all you need to detect both the start and stop of your animation as well as how to toggle a class on the animation element make it work exactly how you want. Further reading about animations here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support – Asons Dec 04 '15 at 14:34

1 Answers1

-1

If you want different animations on hoveron and hoverout (same as mouseover and mouseout in javascript) then your best bet would be something like this.

.button {
 // what you want to happen on hoverout
 animation: // your hoverout animation
}

.button:hover {
 // what you want to happen on hoverover
 animation: // your hoverover animation.
}
Alizoh
  • 1,562
  • 1
  • 13
  • 16
  • 2
    If you look at the code, OP already has this (two different animations on hover in and out) but what they are looking for is the animation to continue till the end state even if you hove in and out quickly. This won't help there. – Harry Dec 04 '15 at 14:04