时间戳

首页 > 解决方案 > 当您在 CSS 中悬停单独的对象时触发 @keyframes 动画

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

问题描述

我想要做的是当我: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.

标签： cssanimation

解决方案

将“无限”添加到您的动画中就足够了，以便它运行不止一次 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>

推荐阅读