Почему этот css3 не работает в webkit для скольжения текста справа налево? - PullRequest
Новая
       33

Почему этот css3 не работает в webkit для скольжения текста справа налево?

1 голос
/ 20 сентября 2011

Я пытаюсь заставить текст скользить слева направо, используя преобразования 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);
    }
}

1 Ответ

3 голосов
/ 20 сентября 2011

Правильный синтаксис объявления ключевых кадров: @ - webkit-keyframes not @ webkit-kayframes . Удаление дефиса убивает его:

Ваш код, теперь с дефисами !: http://jsfiddle.net/eL2UC/

...