logo标签列表

停止动画并在鼠标悬停时开始过渡

css
24

我有一个链接，它使用背景颜色运行无限动画。我想在悬停时停止动画并过渡到不同的背景颜色。

.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;}
}

为什么这段代码不起作用？有没有其他方法可以完成这个任务？（最好不使用JavaScript）。

6个回答
22
尝试使用 -webkit-animation: 0;。 在此查看演示。0 是 animation 的默认值，或者必须设置为禁用任何现有的CSS3动画。
在这种情况下，悬停时没有动画。 - Novelist
OP想要停止动画并将其转换为不同的背景颜色，这正是我的测试用例所做的 :) 它会过渡到绿色！ - Rishabh
对不起，0.2秒太短了 :) 我在您的演示中尝试将其设置为1秒，是的，它有一个动画。 - Novelist
即使我将其设置为“1秒”，它仍会过渡到指定的背景颜色（在这种情况下是绿色）并停留在那里，即停止动画。 - Rishabh
5
似乎Chrome浏览器不再进行过渡动画了。（2014年5月）是浏览器的bug吗？还是标准发生了改变？ - colllin
2
（2020年9月）Chrome 85。过渡时间似乎仍然无法正常工作。 - Giorgos Xou
4

-webkit-animation-play-state：paused表示动画暂停状态，而-webkit-animation-play-state：running表示动画正在运行。

1
谢谢您的尝试，但并没有回答问题。在悬停时，我们希望从当前动画状态过渡到另一种状态。 - colllin
2
我找到了另一种实现这个目标的方法。
编写另一个动画关键帧序列，并在鼠标悬停时调用它。
.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;
}
1
我试图达成相同的目标，在尝试动态更改关键帧等操作后，我通过使用基本的CSS找到了一个奇怪的解决方案，请查看这里fiddle。它并不十分优雅，但确切地实现了我想要的（希望您也是）。 

#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>

0

我遇到了同样的问题，然后找到了以下解决方案。

创建你想要的动画效果，并为每个元素分配不同的类。

然后使用 .mouseover() 或者 .mouseenter() jQuery 事件来切换每个动画所分配的类。

这与汉堡菜单的处理方式类似，只是使用了不同的处理程序。

0

对于那些对动画幻灯片，希望在两张图片之间停顿的人

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接