1

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

1 回答 1

3

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

您的代码,现在带有连字符!: http: //jsfiddle.net/eL2UC/

于 2011-09-20T16:37:07.543 回答