我正在尝试将悬停效果作为元素 这是我的代码片和小提琴
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
@keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
@-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
@-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
@-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
.firstelement {
display:inline-block;
animation:myAnim1 5s;
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.firstelement:hover {
background-color: #ff0000;}
因此,无论我如何设置悬停,动画都会继续运行。帽子是解决这种情况的正确途径吗?
注意过渡也是..
答案 0 :(得分:2)
当你:hover
你的元素时,你需要停止动画循环,所以:
.firstelement:hover {
background-color: #ff0000;
animation: none;
-moz-animation: none;
-webkit-animation: none;
}
这是示例http://jsfiddle.net/Fbk9t/1/
我希望它可以帮到你;)
答案 1 :(得分:1)
将以下代码从无限更改为1:
Old version:
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
New version
-moz-animation:myAnim1 5s 1;
-webkit-animation:myAnim1 5s 1;