24

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).

Passerby
  • 9,715
  • 2
  • 33
  • 50
Sidharth Raja
  • 307
  • 1
  • 3
  • 10

6 Answers6

21

Try -webkit-animation: 0;. Demo here. 0 is the default value for animation or what you must set to disable any existing CSS3 animations.

Rishabh
  • 1,901
  • 2
  • 19
  • 18
  • In this case there is no animation on hover – Novelist Apr 12 '13 at 04:26
  • OP wants to stop the animation and transition it into a **different** background color, which is what my testcase does exactly :) it transitions into green! – Rishabh Apr 12 '13 at 04:27
  • I am sorry. 0.2 seconds is too little :) I've try set to 1second in your demo and, yes, it has an animation – Novelist Apr 12 '13 at 04:30
  • even if I set it to `1s` it **does** transition into the background color specified (in this case its green) and sticks there, i.e., halts the animation. – Rishabh Apr 12 '13 at 04:33
  • 5
    Appears not to transition anymore in Chrome. (May 2014) Browser bug? Or did the standards change? – colllin Jun 04 '14 at 17:13
  • 1
    **(September 2020) Chrome 85. Transition time still doesn't seem to work** – Giorgos Xou Sep 27 '20 at 23:31
4

-webkit-animation-play-state: paused and -webkit-animation-play-state: running

arturmoroz
  • 1,897
  • 1
  • 16
  • 13
  • 1
    Thanks for trying but doesn't answer the question. On hover, we want to *transition* from the current animation state to some other state. – colllin Jun 04 '14 at 17:14
1

Found another way round to achieve this.

Write another animation keyframe sequence and call it on your 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:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}
Neeraj
  • 132
  • 7
1

I was trying to achieve the same kind of thing and after trying to dynamically change keyframes and all, I found a weird solution by using basic css, see fiddle here. It is not very elegant but does exactly what I (and you, I hope) want.

#menu, #yellow{
  position: fixed;
  top: 2.5vw;
  right: 2.5%;
  height: 25px;
  width: 25px;
  border-radius: 30px;
}

#menu{
  animation: blink 2s infinite;
 transition: 1s;
}

@keyframes blink{
  0% { background-color: grey; }
  50% { background-color: black; }
  100% { background-color: grey; }
}

#yellow{
 background-color: rgba(255, 0, 0, 0);
 transition: 1s;
}

#disque:hover #yellow{
 pointer-events: none;
 background-color: rgba(255, 0, 0, 1);
}

#disque:hover #menu{
 opacity: 0;
}
<div id="disque">
  <div id="menu"></div>
  <div id="yellow"></div>
</div>
alexis cros
  • 11
  • 2
0

I have the same issue and the solution I found is the following.

Create the animation you want and for the element you and to each assign each one a different class.

Then use .mouseover() or .mouseenter() jQuery events toggle between the classes you assigned to each animation.

It is similar to what you use for a burger menu, just with a different handler.

Jaime Rios
  • 1,956
  • 2
  • 15
  • 20
0

For those who are interested by animation slide with stop between 2 images

var NumImg = 1; //Img Number to show
var MaxImg = 3; //How many Img in directory ( named 1.jpg,2.jpg ...)

function AnimFond() {
  NumImg = NumImg> MaxImg ? 1 : NumImg +=1;
  var MyImage = "http://startinbio.com/Lib/Images/Fond/" + NumImg + ".jpg";
  $("#ImgFond1").attr("src", MyImage);
  $("#ImgFond2").fadeOut(3000, function() {
    $("#ImgFond2").attr("src", MyImage);
    $("#ImgFond2").fadeIn(1);
  });
}

setInterval("AnimFond()", 10000); //delay between 2 img
#AnimFond {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0 0 0 -8;
}

#AnimFond img {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="AnimFond">
  <img id="ImgFond1" src="http://startinbio.com/Lib/Images/Fond/1.jpg" />
  <img id="ImgFond2" src="http://startinbio.com/Lib/Images/Fond/1.jpg" />
</div>
jjsteing
  • 67
  • 7