Question

我正在尝试使用css keyframe

转换图像

我有类似

的东西

@-webkit-keyframes blinkscale {
    0% {    
        transform: scale(1,1)
    }
    50% {        
        transform: scale(0.1,0.1)
    }
    100% {        
        transform: scale(3,3)
    }
}

.addScale {
    -webkit-animation: blinkscale 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blinkscale 2s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blinkscale 2s;
    -o-animation-iteration-count: infinite;
}

HTML

   <img src='test.jpg' class='addScale' />

如果我将关键帧更改为

，则有效

@-webkit-keyframes blinkscale {
   0% {background: yellow;}
  50% {background: green;} 
  100% {background: blue;}
}

但不是规模之一。任何人都可以帮我吗？非常感谢！

Answer 1

这应该为你做。只需确保供应商前缀持续存在。

CSS：

@-webkit-keyframes blinkscale {
    0% {    
        -webkit-transform: scale(1,1)
    }
    50% {        
        -webkit-transform: scale(0.1,0.1)
    }
    100% {        
        -webkit-transform: scale(3,3)
    }
}

另外需要注意的是，您将-moz-和-o-动画设置为.addScale，因此请务必设置关键帧以容纳所有这些供应商前缀，并且不要忘记标准{{1同样。

Answer 2

这里的链接应该是有用的Keyframe Animations

也许你没有包含正确的浏览器帮助，在webkit关键帧blinkscale中，我只看到mozilla的帮助，。

如何使用css更改元素的大小？

2 个答案:

CSS：