【问题标题】:Css keyframe not work on cordova android (< 4.4)Css关键帧不适用于cordova android(<4.4)
【发布时间】:2014-08-23 13:15:43
【问题描述】:
@-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 的支持。我有什么问题吗?

【问题讨论】:

    标签: android css cordova


    【解决方案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
    

    【讨论】:

    猜你喜欢
    • 2013-09-18
    • 2015-01-15
    • 2013-12-15
    • 1970-01-01
    • 1970-01-01
    • 2013-09-25
    • 2020-03-07
    • 1970-01-01
    • 2016-02-07
    相关资源
    最近更新 更多