CSS 变形元素内的不透明动画

Question

我想做的事情：

我正在并排转换（平移和旋转）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/

Answer 1

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

CSS 变形元素内的不透明动画

CSS opacity animation inside transforming element

html

css

css-transforms

css-animations