Menu
I have a link that's running an infinite animation with the background color. I want to stop the animation and transition into a different background color on hover.
.startlink{ background-color:#206a9e; color:#fff; border-radius:15px; font-family: 'Myriad Pro'; -webkit-animation:changeColor 3.4s infinite; -webkit-transition:all 0.2s ease-in; } .startlink:hover{ -webkit-animation-play-state: paused; background-color: #014a2a; } @-webkit-keyframes changeColor { 0% {background:#206a9e;} 50% {background:#012c4a;} 100% {background:#206a9e;} } Why is this code not working? And is there an alternate way to get this done? (preferably without Javascript).
295
By setting the animation-play-state to paused on hover, the animation will pause, your click targets will stop moving, and your users will be happy.
But transitions are not just limited to use with :hover . You can animate CSS properties, thus use CSS transitions without hover. This is done via transitions using some other CSS techniques, a number of which I've outlined below. I've also included a demo for each example.
The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element. style.
Try -webkit-animation: 0;. Demo here. 0 is the default value for animation or what you must set to disable any existing CSS3 animations.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
