难以覆盖纯 CSS 动画答案

【问题标题】：Difficulty overlaying pure CSS animations难以覆盖纯 CSS 动画
【发布时间】：2018-10-10 22:27:13
【问题描述】：

我从其他地方借用了一个 Venn 动画，并希望将图标（通过 CSS 类的 ionicons）放置在 Venn 中，以便它们根据它进行动画处理。

我尝试了很多方法，但到目前为止，我最接近成功的是基本上运行两组动画，使用相同的参数，在代码中一个接一个地运行。

虽然现在符号和 CSS 圆圈的动画是相同的，但它们不占用相同的空间，因此不会像我想要的那样叠加。我怎样才能在现有的代码设置中实现这一点？我尝试过填充、边距等，但这会使圆形图形倾斜。

谢谢。

动画不会在 Stack Overflow 编辑器中运行，因此请在 Codepen 上查看： Link to animation on Codepen.

* {
  box-sizing: border-box;
}
body {
  background-image: radial-gradient(#fff 25%, #bbb 75%);
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.box {
  height: 50vh;
  width: 50vh;
}
[class^='c'] {
  background-color: #0ff;
  border-radius: 50%;
  height: 50vh;
  width: 50vh;
  mix-blend-mode: multiply;
  position: absolute;
}
.circle1 { /*blue*/
  background-color: rgba(0,255,255,0.5);
  animation: c1 2.5s ease 4 forwards;
}

/*.ion-code{
  animation: code-symbol 2.5s ease 4 forwards; 
  transform: translate(15%, -12%);
}*/

.circle2 { /*yellow*/
  background-color: rgba(255,255,0,0.5);
  animation: c2 2.5s ease 4 forwards ;
}
.circle3 {/*pink*/
  background-color: rgba(255,0,255,0.5);
  animation: c3 2.5s ease 4 forwards ;
}
/*---------------------------------------C1-BLUE-*/

@keyframes c1 {
  0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}

 /*@keyframes code-symbol {
   0% {transform: translate(0, 0); }
  100% {transform: translate(-25%, 25%); }
}*/

/*---------------------------------------C2-YELLOW-*/

@keyframes c2 {
  from {
            transform: translate(0, 0);
            
  }
  to {

            
            transform: translate(0, -25%);
  }
}

/*---------------------------------------C3-PINK-*/

@keyframes c3 {
  from {
            transform: translate(0, 0);
           
    }
    to {

             transform: translate(25%, 25%);
  }
}

/*--------Symbol layer -----------*/

[class^='ion-'] {
  border-radius: 50%;
  height: 150vh;
  width: 150vh;
  mix-blend-mode: multiply;
  position: absolute;
}

.ion-code { /*blue*/
  /*background-color: rgba(0,255,255,0.5);*/
  animation: ion-code 2.5s ease 4 forwards;
  font-size: 4rem;

}

.ion-arrow-graph-up-right { /*yellow*/
 /* background-color: rgba(255,255,0,0.5); */
  animation: ion-arrow-graph-up-right 2.5s ease 4 forwards;
  font-size: 4rem;
}
.ion-ios-settings-strong {/*pink*/
/*  background-color: rgba(255,0,255,0.5); */
  animation: ion-ios-settings-strong 2.5s ease 4 forwards;
  font-size: 4rem;
}
/*---------------------------------------C1-BLUE-*/

@keyframes ion-code {
  from {transform: translate(0, 0); }
  to {transform: translate(-25%, 25%); }
}

/*---------------------------------------C2-YELLOW-*/

@keyframes ion-arrow-graph-up-right {
  from {transform: translate(0, 0);}
  to {transform: translate(0, -25%);}
}

/*---------------------------------------C3-PINK-*/

@keyframes ion-ios-settings-strong {
  from {transform: translate(0, 0);}
    to {transform: translate(25%, 25%);}
}

<body>  
<div class="box">
  <div class="circle1 ion-code" ></div>
  <div class="circle2 ion-arrow-graph-up-right"></div>
  <div class="circle3 ion-ios-settings-strong"></div>
</div>
</body>

【问题讨论】：

@Chris W. 非常感谢您解决了这个问题。我很感激你不厌其烦地制作一支新笔来演示:)

标签： css animation css-animations

【解决方案1】：

您只需要定位本示例中图标所在的 :before 伪元素

SEE CODEPEN

.circle1:before, .circle2:before, .circle3:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

干杯。

【讨论】：

您还可以删除.ion-code、.ion-arrow-graph-up-right & .ion-ios-settings-strong 以及重复的@keyframes 上的动画
伙计们，知道如何在前 0.5 秒内隐藏符号吗？如果您查看更新后的笔codepen.io/thomasabishop/pen/OBmNwj，它们有点相互啮合，虽然简短但有点难看。我尝试向动画添加不透明度规则，但没有运气 - 我对动画不是很有经验。
@ChrisW。那是完美的。我自己永远不会解决这个问题。非常感谢！

【解决方案2】：

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

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

https://codepen.io/anon/pen/xydGzK

【讨论】：

是的，我避免使用属性选择器和诸如 flex 之类的东西只是出于旧习惯，因为这些东西在过去被过度使用时会成为性能考虑因素。就像 +1 的答案一样有效