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 app（＆lt; 4.4）上没有动画（只有0和1）。我在转换（background-image）上发现了相同的问题，它仅适用于4.4设备，但Can I Use表示它受Android浏览器支持＆gt; 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

css关键帧不适用于cordova android（＆lt; 4.4）

1 个答案: