Question

在Chrome中，我可以正常运行此动画：

.card {
    height: 100px;
    width: 100px;
    background: red;
}
.cardSway {
  -webkit-animation: cardSway 1s ease-in-out infinite;
  -moz-animation: cardSway 1s ease-in-out infinite;
  -o-animation: cardSway 1s ease-in-out infinite;
}
@-webkit-keyframes cardSway {
  0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
  50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
  100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
@-moz-keyframes cardSway {
  0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
  50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
  100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
@-o-keyframes cardSway {
  0% {-o-transform: rotate(1deg) translate(-1px,0px);}
  50% {-o-transform: rotate(-1deg) translate(1px,0px);}
  100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}

但是这个动画不起作用：

.card {
    height: 100px;
    width: 100px;
    background: red;
}
.cardSway {
  -webkit-animation: cardSway 1s ease-in-out infinite;
  -moz-animation: cardSway 1s ease-in-out infinite;
  -o-animation: cardSway 1s ease-in-out infinite;
   animation: cardSway 1s ease-in-out infinite;
}
@-webkit-keyframes cardSway {
  0% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
  50% {-webkit-transform: rotate(-1deg) translate(1px,0px);}
  100% {-webkit-transform: rotate(1deg) translate(-1px,0px);}
}
@-moz-keyframes cardSway {
  0% {-moz-transform: rotate(1deg) translate(-1px,0px);}
  50% {-moz-transform: rotate(-1deg) translate(1px,0px);}
  100% {-moz-transform: rotate(1deg) translate(-1px,0px);}
}
@-o-keyframes cardSway {
  0% {-o-transform: rotate(1deg) translate(-1px,0px);}
  50% {-o-transform: rotate(-1deg) translate(1px,0px);}
  100% {-o-transform: rotate(1deg) translate(-1px,0px);}
}
@keyframes cardSway {
  0% {transform: rotate(1deg) translate(-1px,0px);}
  50% {transform: rotate(-1deg) translate(1px,0px);}
  100% {transform: rotate(1deg) translate(-1px,0px);}
}

我能找到的唯一区别是通用关键帧选择器的存在正在弄乱-webkit-前缀代码。其他Chrome用户表示它对他们来说很好，所以我认为这是一个破坏性的安装。我重新安装了，这对我来说仍然是一个问题。有什么想法吗？

修改的在这个主题中找到了我的问题的答案：https://code.google.com/p/chromium/issues/detail?id=331261

chrome：// flags中的“启用实验性Web平台功能”导致前缀冲突。禁用它解决了我的问题。：）

关键帧动画适用于Safari而非Chrome

0 个答案: