CSS 在打开和关闭时淡入淡出不同的字母

Question

我正在尝试制作一个切换按钮，在打开和关闭时显示不同的字母。然而，这些字母不会随着我添加的 css 动画而淡入淡出。

这里是 codepen .我想让“A”在打开时淡出，“Z”在打开时淡入，反之亦然。

.bubble:after {
    content: 'A';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: -2px;

    left: 50%;
    border-radius: 2px;
    opacity: 0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

#bubble:checked + .bubble:after {
    content: 'Z';
    position: absolute;
    top: 50%;
    margin-top: -15px;
    margin-left: -2px;
    left: 50%;
    border-radius: 2px;
    opacity: 0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

我最初的目标是得到类似 this 的东西没有库依赖性，但我不知道如何仅在图标被按钮 handle 覆盖时才更改图标的颜色。任何实现想法也将受到赞赏。

Answer 1

我给 .bubble 添加了颜色:

.bubble{    /* label, 움직인 후 bubble 최종 shape */
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  height:100px;
  width:100px;
  color: white;
  transform:translate3d(-75%,-50%,0);
  margin-left:-50px;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  border-right: 0px solid #BBBBBB;
  border-left: 0px solid #BBBBBB;
  animation: toggle-reverse 1s 1;  /* 오른쪽에서 왼쪽 */
}

.bubble:after {
  content: 'A';
  position: absolute;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
  left: 50%;
  border-radius: 2px;
  opacity: 1;
  color: inherit;
}

#bubble:checked + .bubble{ /* input 이 check 된 상태 에서 그 다음의 bubble 즉 label */
  animation: toggle 1s 1;  /* 왼쪽 에서 오른쪽 */
  transform:translate3d(6%,-50%,0); 
  background: #3CCC97;   
}

#bubble:checked + .bubble:after {
  content: 'Z';
  position: absolute;
  opacity: 1;
}

然后，我将颜色变化添加到切换动画中，如下所示:

@keyframes toggle {
  0%   {
  transform:translate3d(-75%,-50%,0);
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #BBBBBB;
  }
  20% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-left: 0 solid #BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-right: 25px solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  background:#BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px; 
  color: #BBBBBB;  
  }
  75%  {
  border-left: 25px solid #3CCC97;
  border-color:#3CCC97;
  background: #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  color: #3CCC97;
  }
  100% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}


@keyframes toggle-reverse {
  0%   {
  transform:translate3d(6%,-50%,0);
  background: #3CCC97;
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 100px;
  color: #3CCC97;
  }
  20% {
  border-right: 0 solid #3CCC97;
  border-left: 0 solid #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(6%,-50%,0);
  height: 100px;
  } 
  40%  {
  border-right: 0 solid #3CCC97;
  border-radius: 65% 35% 35% 65% / 50% 50% 50% 50%;
  height: 90px;
  }
  50%  {
  transform:translate3d(-30%,-50%,0);
  border-left: 25px solid #3CCC97;
  border-right: 0 solid #3CCC97;
  background: #3CCC97;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  height: 90px;  
  color: #3CCC97; 
  }
  75%  {
  border-right: 25px solid #BBBBBB;
  border-color:#BBBBBB;
  background:#BBBBBB;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  height: 90px;
  color: #BBBBBB; 
  }
  100% {
  border-right: 0 solid #BBBBBB;
  border-left: 0 solid #BBBBBB;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform:translate3d(-75%,-50%,0);
  height: 100px;
  width:100px;
  color: white;
  }
}