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 应用程序（Can I Use 表示它受 android browser > 4.0 的支持。我有什么问题吗？

Answer 1

过去版本的 Webkit 无法为伪元素渲染动画，例如 :after 和 :before。在您的情况下， .image-arrow 类具有 content: 属性，该属性通常保留用于伪元素。我建议你用 background-image 替换它，例如：

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