当您在CSS中悬停单独的对象时,触发@keyframes动画

时间:2019-03-03 22:54:38

标签: css animation

我想做的是当我: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其他事物(例如触发器:hoverdiv)时,我只希望能够触发跨度的img振铃。

2 个答案:

答案 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不会执行任何操作,因为跨度不是子图像。请检查下面的图钉:

Animation on hover