css - 简单的 CSS3 动画在 Webkit 中不起作用

Question

在这里建立一个站点:http://chooseavirb.com/strat/

出于某种原因，webkit - chrome、safari - 动画没有触发:

@-webkit-keyframes slideright{
0% {transform: translate(0px, 0px)}
20% {transform: translate(00px,0px)}
25% {transform: translate(150px, 0px)}
45% {transform: translate(150px,0px)}
50% {transform: translate(300px,0px)}
70% {transform: translate(300px,0px)}
75% {transform: translate(150px,0px)}
95% {transform: translate(150px,0px)}
100% {transform: translate(0px,0px)}
}

#SliderNine img
{display: inline-block;
 animation: slideright 30s infinite;
-moz-animation: slideright 30s infinite;
-webkit-animation: slideright 30s infinite;   
-ms-animation: slideright 30s infinite;     
}

任何有专业知识的人都可以说这可能会发生吗？它在 firefox 上运行良好。-

Answer 1

请检查以下链接。

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

同样使用特定浏览器相关的transform动画如下

例子:-

-webkit-transform:  translate(0px, 0px);

-o-transform: translate(0px, 0px); 

-moz-transform: translate(0px, 0px);

它可能会为你创造魔法!

这可能有助于举例

http://www.w3schools.com/css3/css3_2dtransforms.asp