转换元素内的 CSS 不透明度动画答案

【问题标题】：CSS opacity animation inside transforming element转换元素内的 CSS 不透明度动画
【发布时间】：2017-11-02 05:10:42
【问题描述】：

我想做什么：

我正在并排变换（平移和旋转）2 个元素，它们内部都有内容。内容有另一个动画。它在父级转换时淡入或淡出。

问题：

每当我为内容添加不透明动画时，第二个（转换）元素将始终在 Android 设备中呈现在另一个元素之上。但它可以在桌面浏览器和 iOS 设备中正确呈现。这是image 的外观（请注意红色块在紫色块后面）。

如果我删除内容淡入淡出动画，它会开始在 Android 设备上正确呈现。

如何修复它，使其在 Android 设备上也能正常工作？

注意：内容可以是文本、图片、多个嵌套元素等。我只是使用简单的文本来简化问题。

下面是代码的简化：

<div class="container">
  <div class="block block-1">
    <div class="content content-1">Bye</div>
  </div>
  <div class="block block-2">
    <div class="content content-2">Hello</div>
  </div>
</div>


.block {
  @extend %full;
  @extend %animation;
  transform-origin: 50% 50%;

  &.block-1 {
    background-color: purple;
    animation-name: move-out;
  }
  &.block-2 {
    background-color: red;
    animation-name: move-in;
  }
}

.content {
  font-size: 2em;
  color: white;
  text-align: center;
  @extend %animation;

  &.content-1 {
     animation-name: fade;
  }
  &.content-2 {
    animation-name: fade;
    animation-direction: reverse;
  }
}

http://codepen.io/Ostos/pen/YZZzmm/

【问题讨论】：

标签： html css css-animations css-transforms

【解决方案1】：

经过几种尝试解决此问题的方法后，我发现最好的方法是使内容成为旋转父级的兄弟，并在内容上添加旋转动画和淡入淡出动画。 Android 设备显然可以处理具有这两种动画的元素，但不能处理具有变换的父级和具有不透明动画的子级。

【讨论】：