Question

我正在尝试使用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);
    }
}

Answer 1

声明关键帧的正确语法是 @ - webkit-keyframes 而非 @ webkit-kayframes 。删除连字符会将其杀掉：

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

为什么这个css3不能在webkit中从右到左滑动文本？

1 个答案: