悬停时图像闪烁-css动画

当主图标悬停时，图标的旋转交错，无法顺利完成旋转。通常在将鼠标悬停在图标上偏离中心时发生。我试着瞄准一个不同的部门，但没有什么能阻止它。我猜是因为它旋转时的透明度

有什么想法吗

小提琴：

。社交图标{
保证金：0自动；
宽度：640px；
高度：128px；
位置：相对位置；
}
.社交图标.社交图标图像{
显示：内联块；
位置：绝对位置；
宽度：33%；
高度：自动；
z指数：2；
不透明度：1；
过渡：全部5秒；
填充：2%；
框大小：边框框；
}
.社交图标.社交图标图像a{
显示：内联块；
宽度：100%；
身高：100%；
}
.社会偶像{
宽度：100%；
保证金：0；
填充：0；
框大小：边框框；
}
.社交图标a：悬停图标{
宽度：110%；
高度：自动；
利润率：-5%；
}
.社交图标。社交图标图像：第n个孩子（1）{
左：33.755%；/*（第n个孩子（2）。左-（50%*20%）/4）*/
顶部：25%；/*（（100%-50%）/2）*/
z指数：0；
宽度：10%；/*（50%*20%）*/
高度：自动；
不透明度：.5；
}
.社交图标。社交图标图片：第n个孩子（2）{
左：36.25%；/*（40%-（75%*20%）/4）*/
排名：12.5%；/*（（100%-75%）/2）*/
z指数：1；
宽度：15%；/*（75%*20%）*/
高度：自动；
不透明度：.75；
}
.社交图标。社交图标图片：第n个孩子（3）{
左：40%；
z指数：2；
宽度：20%；
高度：自动；
}
社交图标。社交图标图片：第n个孩子（4）{
左：48.75%；/*（60%-3*（75%*20%）/4*/
排名：12.5%；/*（（100%-75%）/2）*/
z指数：1；
宽度：15%；/*（75%*20%）*/
高度：自动；
不透明度：.75；
}
.社交图标。社交图标图片：第n个孩子（5）{
左：56.25%；/*（第n个孩子（4）。左+（第n个孩子（4）。宽度-3*（50%*20%）/4）*/
顶部：25%；/*（（100%-50%）/2）*/
z指数：0；
宽度：10%；/*（50%*20%）*/
高度：自动；
不透明度：.5；
}
.社交图标内部：悬停。社交图标图像：第n个子（1）{
顶部：0px；
左：0%；
宽度：20%；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个子（2）{
顶部：0px；
左：20%；
宽度：20%；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个子（3）{
排名：0；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
变换样式：保留-3d；
不透明度：1；
-webkit过渡：不透明度1s易入易出，
-webkit转换1s；
过渡：不透明度1s缓进缓出，
-webkit转换1s；
转换：转换1s，
不透明度1s，易于输入输出；
转换：转换1s，
不透明度1s缓进缓出，
-webkit转换1s；
}
.社交图标内部：悬停。社交图标图像：第n个子（3）。活动{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个子（4）{
顶部：0px；
左：60%；
宽度：20%；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个子（5）{
顶部：0px；
左：80%；
宽度：20%；
不透明度：1；
}

---

问题在于，当您旋转图元时，

:hover

状态会失败，因为它正在旋转且已脱离悬停状态

旋转其中的

a

元素，而不是实际元素：

.social-icons-inner:hover .social-icons-image:nth-child(3) a {...}

。社交图标{
保证金：0自动；
宽度：640px；
高度：128px；
位置：相对位置；
}
.社交图标.社交图标图像{
显示：内联块；
位置：绝对位置；
宽度：33%；
高度：自动；
z指数：2；
不透明度：1；
过渡：全部5秒；
填充：2%；
框大小：边框框；
}
.社交图标.社交图标图像a{
显示：内联块；
宽度：100%；
身高：100%；
}
.社会偶像{
宽度：100%；
保证金：0；
填充：0；
框大小：边框框；
}
.社交图标a：悬停图标{
宽度：110%；
高度：自动；
利润率：-5%；
}
.社交图标。社交图标图像：第n个孩子（1）{
左：33.755%；/*（第n个孩子（2）。左-（50%*20%）/4）*/
顶部：25%；/*（（100%-50%）/2）*/
z指数：0；
宽度：10%；/*（50%*20%）*/
高度：自动；
不透明度：.5；
}
.社交图标。社交图标图片：第n个孩子（2）{
左：36.25%；/*（40%-（75%*20%）/4）*/
排名：12.5%；/*（（100%-75%）/2）*/
z指数：1；
宽度：15%；/*（75%*20%）*/
高度：自动；
不透明度：.75；
}
.社交图标。社交图标图片：第n个孩子（3）{
左：40%；
z指数：2；
宽度：20%；
高度：自动；
}
社交图标。社交图标图片：第n个孩子（4）{
左：48.75%；/*（60%-3*（75%*20%）/4*/
排名：12.5%；/*（（100%-75%）/2）*/
z指数：1；
宽度：15%；/*（75%*20%）*/
高度：自动；
不透明度：.75；
}
.社交图标。社交图标图片：第n个孩子（5）{
左：56.25%；/*（第n个孩子（4）。左+（第n个孩子（4）。宽度-3*（50%*20%）/4）*/
顶部：25%；/*（（100%-50%）/2）*/
z指数：0；
宽度：10%；/*（50%*20%）*/
高度：自动；
不透明度：.5；
}
.社交图标内部：悬停。社交图标图像：第n个子（1）{
顶部：0px；
左：0%；
宽度：20%；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个子（2）{
顶部：0px；
左：20%；
宽度：20%；
不透明度：1；
}
.社交图标内部：悬停。社交图标图像：第n个孩子（3）a{
排名：0；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
变换样式：保留-3d；
不透明度：1；
-webkit过渡：不透明度1s易入易出，
-webkit转换1s；
过渡：不透明度1s缓进缓出，
-webkit转换1s；
转换：转换1s，
不透明度1s，易于输入输出；
转换：转换1s，
不透明度1s缓进缓出，
-webkit转换1s；
}
.社交图标内部：悬停。社交图标图像：第n个子（3）。活动{
-韦布基