我想做的是当我:hover
触发容器时,它应该触发跨度上的@keyframes
环,就像它在加载页面时那样。
我在这里有一个Codepen链接:https://codepen.io/anon/pen/moERzj
.trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
.trigger {
margin: 0 auto;
position: relative;
}
.trigger > span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > img:hover > span {
-webkit-animation: rings 1s;
-moz-animation: rings 1s;
-ms-animation: rings 1s;
-o-animation: rings 1s;
animation: rings 1s;
}
.trigger > span:nth-child(1) {
animation-delay: 0s;
}
.trigger > span:nth-child(2) {
animation-delay: 0.2s;
}
.trigger > span:nth-child(3) {
animation-delay: 0.4s;
}
@-webkit-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1; transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-moz-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-ms-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@-o-keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
@keyframes rings {
0% {opacity: 0;transform: scale(1);}
70% {opacity: 1;transform: scale(1.3);}
100% {opacity: 0;transform: scale(1);}
}
当我@keyframes
其他事物(例如触发器:hover
或div
)时,我只希望能够触发跨度的img
振铃。
答案 0 :(得分:0)
在动画中添加“无限”就足够了,这样它可以运行多次:
animation: rings 1s infinite;
:
"use strict";
const element = document.getElementById("trigger");
element.addEventListener("mouseover", function(e){
element.classList.remove("animated");
void element.offsetWidth;
element.classList.add("animated");
}, false);
body { background: #333;}
#trigger {
margin: 60px auto;
padding: 30px;
position: relative;
border: 2px solid red;
width: 300px;
text-align: center;
}
#trigger * {
pointer-events: none;
}
#trigger img {
width: 140px;
border-radius: 100%;
padding: 2px;
}
#trigger.animated span {
border-radius: 100% / 100%;
position: absolute;
width: 140px;
height: 140px;
border: 2px solid #fff;
background: #333;
z-index: -1;
animation: rings 1s;
}
#trigger span:nth-child(1) {
animation-delay: 0s;
}
#trigger span:nth-child(2) {
animation-delay: 0.2s;
}
#trigger span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes rings {
0% {
opacity: 0;
transform: scale(1);
}
70% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0;
transform: scale(1);
}
}
<div id="trigger" class="animated">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140" alt="some pic">
</div>
答案 1 :(得分:0)
我已经完成了一种巧妙的方法,可以使悬停时的运行动画流畅,但是当您消除干扰时,它并不会顺利结束,但是它会在悬停时完全填充一件事动画。我注意到.trigger img:hover span
不会执行任何操作,因为跨度不是子图像。请检查下面的图钉: