为什么这个 css3 不能在 webkit 中用于从右向左滑动文本？答案

【问题标题】：Why wouldn't this css3 work in webkit for sliding text from right to left?为什么这个 css3 不能在 webkit 中用于从右向左滑动文本？
【发布时间】：2011-11-21 05:41:10
【问题描述】：

我正在尝试使用 webkit 转换让文本从左向右滑动。我意识到我可以使用<marquee> 来做到这一点（即使它正在消失），但我需要使用关键帧更好地控制动画。下面的 CSS 似乎没有向任何方向移动文本，我无法想象为什么。

HTML：

<!doctype html>
    <html>
        <head>
        <link rel="stylesheet" href="test.css" type="text/css">
        </head>
        <body>
          <div id="container">
            <header>
            <h1>Some header test sliding</h1>
            </header>
          </div>
        </body>
    </html>

CSS：

#container header h1{
-webkit-animation-name: slider; 
-webkit-animation-duration: 26s;
-webkit-animation-timing-function: linear;
}

@webkit-keyframes slider{
    0%{
    -webkit-transform: translateX(0);
    }
    70%{
    -webkit-transform: translateX(0);
    -webkit-transform: translateX(175px);
    }
    75%{
    -webkit-transform: translateX(85px);
    }
    80%{
    -webkit-transform: translateX(55px);
    }
    85%{
    -webkit-transform: translateX(35px);
    }
}

【问题讨论】：

你确定你的选择器是正确的吗？
只是我放的一个注释-webkit-animation-iteration-count:infinite;只是为了测试，我意识到会一样好，但我正在寻找更好的表现形式，关键帧非常适合它。
您应该编辑您的原始问题，而不是将其作为评论发布。
另外，显然未使用的标签被剥离了。

标签： html css webkit css-animations

【解决方案1】：

声明关键帧的正确语法是 @-webkit-keyframes 而不是 @webkit-kayframes。删除连字符会杀死它：

您的代码，现在带有连字符！：http://jsfiddle.net/eL2UC/

【讨论】：

呸！！总是那么糟糕的东西就是答案。谢谢！！