CSS 停止动画并在悬停时开始过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15962710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop animation and start transition on hover
提问by Sidharth Raja
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).
为什么这段代码不起作用？有没有其他方法可以完成这项工作？（最好没有 Javascript）。
采纳答案by Rishabh
回答by arturmoroz
-webkit-animation-play-state: paused and -webkit-animation-play-state: running
-webkit-animation-play-state：暂停和 -webkit-animation-play-state：运行
回答by Jaime Rios
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.
然后使用 .mouseover()或.mouseenter()jQuery 事件在您分配给每个动画的类之间切换。
It is similar to what you use for a burger menu, just with a different handler.
它类似于您用于汉堡菜单的内容，只是使用了不同的处理程序。
回答by Neeraj
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;
}
回答by jjsteing
For those who are interested by animation slide with stop between 2 images
对于那些对在 2 个图像之间停止的动画幻灯片感兴趣的人
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>回答by alexis cros
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 fiddlehere. It is not very elegant but does exactly what I (and you, I hope) want.
我试图实现同样的事情，在尝试动态更改关键帧等之后，我通过使用基本 css 找到了一个奇怪的解决方案，请参阅此处的小提琴。它不是很优雅，但正是我（和你，我希望）想要的。
#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>