css - 关键帧动画转换未在 chrome 中运行

Question

以下似乎适用于 Firefox 和 Safari，甚至 IE!但在 Chrome 中不。

(适用于 Firefox 和 IE，但如果您在 Chrome 中打开它，您什么​​也看不到!)

@keyframes animationFrames{
  0% {
    transform:  translate(-402px,55px)  ;
  }
  4% {
    transform:  translate(-333px,26px)  ;
  }
  9% {
    transform:  translate(-257px,-13px)  ;
  }
  14% {

Answer 1

那是因为@keyframes 规则是not supported通过 Chrome 呢。您必须使用带前缀的规则 @-webkit-keyframes，例如:

/* Chrome, Safari, Opera */ 
@-webkit-keyframes animation {
    0% { }
    100% { }
} 

/* Standard syntax */ 
@keyframes animation {
    0% { }
    100% { }
}

更新

I'm sure – example