[Solved] Background animated on mouseleave problem

[maxisix]

Hey guys i’am trying to do a background animation on hover. The problem is when the mouse leave the background is coming back to his normal position but its not really smooth. You can try on http://codepen.io/maxisix/pen/Aiprm?editors=110

thx !

[Mottie]

Try this (demo)

header {
  background: url(http://subtlepatterns.com/patterns/food.png);
  width: 100%;
  height: 300px;
  animation: animatedBackground 5s linear infinite;
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused; 
  animation-play-state:paused;

  &:hover {
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;
    -o-animation-play-state:running; 
    animation-play-state:running;
  }

}

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

[maxisix]

Oh nice i tried this but it didn’t worked for me… maybe because autoprefixer doesnt support this feature yet ! Thx ! SOLVED ! :)

[Author]

Posts