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-kayframesではなく@-webkit-keyframesです。ハイフンを削除すると、それが殺されます。

ハイフン付きのコード: http://jsfiddle.net/eL2UC/

于 2011-09-20T16:37:07.543 に答える