CSS3 使用 animation 动画出现字体模糊

使用CSS3做了如下文字切换的效果，通过给元素设置 active 、 disappear class， 配合animation实现动画：

animation 代码如下：

@keyframes transfromAnimate {
  from {
    opacity: 0;
    transform:translate3d( 0, 16px, 0);
  }
  to {
    opacity: 1;
    transform:translate3d( 0, 0px, 0);
  }
}
@keyframes transfromAnimate2 {
  from {
    opacity: 1;
    transform:translate3d( 0, 0px, 0);
  }
  to {
    opacity: 0;
    transform:translate3d( 0, 16px, 0);
  }
}

此处执行animation动画时，页面其他文字出现如下文字模糊问题：

此处代码如下：

.legend {
    position: absolute;
    right: 24px;
    bottom: 36px;
    display: flex;
    /* z-index: 100; */ 
    .legendItem {
      display: flex;
      align-items: center;
      margin-right: 20px;
      opacity: 0.4;
    }
  }

解决办法： 在.legend内添加z-index后模糊效果消失。

原理参考：
张鑫旭： 深入理解CSS中的层叠上下文和层叠顺序
很好玩：CSS动画原理及硬件加速