难以覆盖纯CSS动画

我从其他地方借用了一个维恩动画，并希望将图标（通过CSS类的ionicons）放置在维恩中，以便它们按照它来制作动画

我已经尝试了许多方法，但迄今为止最接近成功的方法是使用相同的参数，在代码中一个接一个地运行两组动画

虽然现在符号和CSS圆的动画是相同的，但它们不占用相同的空间，因此不会像我所希望的那样覆盖。如何在现有的代码设置中实现这一点？我尝试过填充、边距等，但这会使圆形图形倾斜

多谢各位

动画不会在堆栈溢出编辑器中运行，因此请在Codepen上查看：

*{
框大小：边框框；
}
身体{
背景图像：径向梯度（fff 25%，bbb 75%）；
高度：100vh；
宽度：100vw；
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.盒子{
高度：50vh；
宽度：50vh；
}
[class^='c']{
背景色：#0ff；
边界半径：50%；
高度：50vh；
宽度：50vh；
混合模式：倍增；
位置：绝对位置；
}
.circle1{/*蓝色*/
背景色：rgba（0255255,0.5）；
动画：c1 2.5秒轻松4次向前移动；
}
/*.离子代码{
动画：代码符号2.5s轻松4向前；
转换：翻译（15%，-12%）；
}*/
.circle2{/*黄色*/
背景色：rgba（255255,0,0.5）；
动画：c2 2.5秒轻松4次向前移动；
}
.circle3{/*粉红色*/
背景色：rgba（255,0255,0.5）；
动画：c3 2.5s轻松4向前；
}
/*---------------------------------------C1-蓝色-*/
@关键帧c1{
0%{transform:translate（0，0）；}
100%{transform:translate（-25%，25%）；}
}
/*@关键帧代码符号{
0%{transform:translate（0，0）；}
100%{transform:translate（-25%，25%）；}
}*/
/*---------------------------------------C2-黄色-*/
@关键帧c2{
从{
变换：平移（0,0）；
}
到{
转换：翻译（0，-25%）；
}
}
/*---------------------------------------C3-粉红色-*/
@关键帧c3{
从{
变换：平移（0,0）；
}
到{
转换：翻译（25%，25%）；
}
}
/*--------符号层-----------*/
[class^='ion-']{
边界半径：50%；
高度：150vh；
宽度：150vh；
混合模式：倍增；
位置：绝对位置；
}
.ion代码{/*蓝色*/
/*背景色：rgba（0255255,0.5）*/
动画：离子代码2.5s轻松4向前；
字号：4rem；
}
.ion向右上箭头图{/*黄色*/
/*背景色：rgba（255255,0,0.5）*/
动画：离子箭头图向上向右2.5s向前移动4次；
字号：4rem；
}
.ion ios设置强{/*粉红色*/
/*背景色：rgba（255,0255,0.5）*/
动画：ion ios设置强2.5s轻松4向前；
字号：4rem；
}
/*---------------------------------------C1-蓝色-*/
@关键帧编码{
来自{transform:translate（0，0）；}
到{transform:translate（-25%，25%）；}
}
/*---------------------------------------C2-黄色-*/
@向上向右旋转箭头图形的关键帧{
来自{transform:translate（0，0）；}
到{转换：转换（0，-25%）；}
}
/*---------------------------------------C3-粉红色-*/
@关键帧：ios设置强{
来自{transform:translate（0，0）；}
到{转换：翻译（25%，25%）；}
}

---

您只需要针对本例中图标所在的

：before

伪元素

---

干杯。

就我个人而言，我喜欢使用flexbox进行这种定心：

[class*='ion-']:before {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

---

您还可以删除

.ion code

，

上的动画。ion arrow graph up right

&

.ion ios设置strong

以及复制的

@关键帧

伙计们，你知道我如何在前0.5秒内隐藏符号吗？如果你看一下更新过的钢笔，它们有点相互交错，虽然简短但有点难看。我曾尝试向动画添加不透明度规则，但没有成功-我对动画不是很有经验。@ChrisW。那太完美了。我自己永远也不会解决这个问题。非常感谢@Chris W.非常感谢这已经解决了问题。我很感激你不辞辛劳地制作一支新钢笔来演示：）是的，我避免使用属性选择器和flex之类的东西，只是出于旧习惯，当这些东西在过去过度使用时成为性能考虑因素。尽管+1的答案同样有效

[class*='ion-']:before {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}