具有关键帧和背景大小属性的CSS3动画在Chrome 51中无效

我有一段类似于this example中的代码.基本上有一些keyFrames(0％和100％)将background-size属性设置为100％,而keyFrame 50％将该属性设置为50％.

@keyframes imagebulger {
  0%,100% {
    background-size: 100% auto;
  }
  50% {
    background-size: 50% auto;
  }
}

div.hotspot {
  width: 200px;
  height: 100px;
  background-image: url("http://dummyimage.com/200x100/000/fff");
  background-repeat: no-repeat;
  animation: imagebulger 2s infinite !important;
}

该示例在Chrome中按预期工作(执行转换)< 51,Firefox,IE 11等.但是,在Chrome更新(51.0.2704.63)之后,它不再起作用了.我在Windows计算机和Linux计算机上尝试过相同的结果. 有这个问题的人找到了解决方法吗？否则我会直接发布Chrome错误 与问题Background-size transitions in Chrome 51 – a bug or a feature?相关,似乎它使用前缀属性,但没有它,这根本没有意义.

This version将工作,但我被迫将前缀-webkit-设置为正常的关键帧,这可能会使这个动画在其他一些浏览器中不起作用.我不认为这是一个公认的解决方案.

最佳答案

解决方法

使用标准背景大小后跟-webkit-background-size,可以解决问题(example).

div.hotspot {
  width: 200px;
  height: 100px;
  background-image: url("http://dummyimage.com/200x100/000/fff");
  background-repeat: no-repeat;
  animation: imagebulger 2s infinite;
}
@keyframes imagebulger {
  0%,100% {
    background-size: 100% auto;
    -webkit-background-size: 100%;
  }
  50% {
    background-size: 50% auto;
    -webkit-background-size: 50%;
  }
}

原文地址：https://www.jb51.cc/css/426965.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。