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

Question

我试图问我的问题很简单...我在这里有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;
}
}
///////

Answer 1

[在尊重CSS的基础上，在＃Ball1，＃Ball2和＃Ball3（Es lo que oyoy suponiendo debido a este no aparece en aparece en aparece en aparece en el cared que coaste） ，de serasí，elcódigodeberíade ser：