android - Css 关键帧不适用于 cordova android (< 4.4)

Question

@-webkit-keyframes headerFade
  0%
    opacity: 0
  50%
    opacity: 1
  99%
    opacity: 0
@keyframes headerFade
  0%
    opacity: 0
  50%
    opacity: 1
  99%
    opacity: 0

.header
  width: 100px
  height: 100px
  background: #ccc
  position: relative

.header.ani:before
  content: ' '
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  background-color: #000000
  -webkit-transform: translate3d(0,0,0)
  -webkit-backface-visibility: hidden
  -webkit-animation: headerFade 1s linear infinite
  -webkit-animation-fill-mode: forwards
  animation: headerFade 1s linear infinite

codepen here

它在 chrome 上运行良好，但在 cordova android 应用程序(<4.4)上没有动画(只有 0 和 1)。我在 transform(background-image) 上发现了同样的问题，它只适用于 4.4 设备，但是 Can I Use说它被android浏览器支持> 4.0。我有什么不对吗？

Answer 1

过去版本的 Webkit 无法为伪元素呈现动画，例如 :after 和 :before。在您的情况下， .image-arrow 类具有 content: 属性，该属性通常仅保留用于伪元素。我建议您将其替换为背景图像，例如:

e.header.ani /*:before*/
  /*content: ' '*/
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  background-color: #000000
  -webkit-transform: translate3d(0,0,0)
  -webkit-backface-visibility: hidden
  -webkit-animation: headerFade 1s linear infinite
  -webkit-animation-fill-mode: forwards
  animation: headerFade 1s linear infinite