我有一段类似于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.f2er.com/css/426965.html
