@webkit 关键帧不能很好地悬停任何解决方案？答案

【问题标题】：@webkit keyframes doesnt work pretty well for hover any solution?@webkit 关键帧不能很好地悬停任何解决方案？
【发布时间】：2020-03-26 23:51:48
【问题描述】：

我试着问我的问题很简单...... 我这里有 3 个盒子，我有所有的动画我正在使用 webkate 帧制作动画如果我是这样开始的，它将在页面加载时执行动画，但我希望它在我悬停另一个元素时执行动画...

HTML 代码：

<div class="Ball1" id="Ball1">
</div>


<div class="Ball2" id="Ball2">
</div>


<div class="Ball3" id="Ball3">
</div>

CSS 代码：

#Ball1,#Ball2,#Ball3 {
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
border-radius: 60%;
}

//An Element... For Example a text or a box or body or anything else
#anelemnt:hover > #Ball1,#Ball2,#Ball3 {
-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 
0.745, 0.715) both;
animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 
0.715) both;
}

@-webkit-keyframes puff-in-center {
0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}
}

@keyframes puff-in-center {
0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}
}
///////

【问题讨论】：

标签： javascript html css css-animations frames

【解决方案1】：

您的代码目前在做什么：

根据显示的代码，当您将鼠标悬停在具有“anelement” id 的直接父元素上时，您将触发 Ball1 上的动画，并且立即触发 Ball2 和 Ball3 的动画...

我认为你打算做什么：

我的猜测是您打算将#anelement:hover 应用于所有三个球，但之前的组合选择器不适用于逗号之后。

推荐的修复方法：

因此你需要：

#anelemnt:hover > #Ball1,#anelemnt:hover > #Ball2,#anelemnt:hover > #Ball3 {

或

#anelemnt:hover > .ball 将被推荐并删除 id 并将相同的球类应用于所有 3 个 div。

我不确定这是否真的是您想要的，因为您的 HTML 代码不会显示 id 为“anelement”的父元素。

如何根据悬停在另一个元素上进行动画处理：

如果您希望球在您将鼠标悬停在页面上的另一个项目上时进行动画处理，那么通常使用 CSS 您只能根据悬停元素或父元素或兄弟元素来将此效果应用于元素在这里使用 CSS 选择器完成了（请参阅此处的组合器部分 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators）

您可以为悬停的元素的子元素或同级元素设置动画，但不能为其父元素设置动画。

另外，由于您只包含 0 和 100 的关键帧，我建议您改用 CSS "transitions"（请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions）

我希望这会有所帮助！

【讨论】：