CSS3 получать динамические значения для анимации

Question

Я следующий код, который просто перемещает мое изображение на экране:

   /* This is the animation code. */ 
     @-webkit-keyframes example { 
    from { -webkit-transform: translateX(0px); } 
    to { -webkit-transform: translateX(1900px) } 
} 

     /* This is the element that we apply the animation to. */ 
     img#container { 
      -webkit-animation: example 1s ease 0s 1 normal; 
     } 

Проблема, которую я не могу обернуть мою голову вокруг устанавливающего значение translateX анимации к чему-то, вычисленному в javascript, например, положение x центра экрана. Есть ли способ установить атрибут «to» в javascript, а затем применить имя идентификатора?

Answer 1

, чтобы установить CSS3 преобразования значения рассмотреть возможность использования JQuery и .transit плагина. Эта веб-страница содержит демонстрацию различных эффектов анимации CSS3.

Пример:

$('#container').transition({ x: '1900px' }); 

Глядя на их source code, вы увидите, что делать различные эффекты в JQuery является утомительным, так как много относительной информации стиля необходимо, чтобы созданный желаемых результатов. Затем, чтобы преобразовать этот jQuery в чистый эквивалент JavaScript, нужно что-то посмотреть.

Test .transit Plugin с перевести X: jsFiddle

Answer 2

Вы можете использовать выражение CSS, чтобы установить значения JS в свой класс CSS, как, например

height:expression(document.body.clientHeight + "px"); 

Это путь мы пишем выражения CSS.