Why wouldn't this css3 work in webkit for sliding text from right to left?
I'm trying to get text to slide from left to right using webkit transforms. I realize I could use <marquee> to do this (even though it's going away) but I need better control of the animation using keyframes. The CSS below doesn't seem to move the text in any direction and I can't imagine why.
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);
}
}
The correct syntax for declaring keyframes is @-webkit-keyframes not @webkit-kayframes. Removing the hyphen kills it:
Your code, now with hyphens!: http://jsfiddle.net/eL2UC/
加载中,请稍侯......
精彩评论