Как написать анимацию CSS3 с объектами JavaScript?

Для библиотеки анимации, которую я создаю, я хочу переходы и анимации.Как написать анимацию CSS3 с объектами JavaScript?

Переходы были простыми. Я могу легко получить доступ к свойству перехода от свойства стиля объекта элемента:

document.body.style['-webkit-transition'] = "background 1s"; 
    document.body.background = "#f00";

Я знаю, что в CSS, есть 2 части к анимации, @ -keyframes и затем вызвать фактическую анимацию.

Как мне назначить правило @ -keyframe через чистый JavaScript?

Это не будет быть чем-то вроде переходов, потому что правила @ -keyframe не применяются непосредственно к элементам.

Альтернативой этому было бы динамическое создание правила @ -keyframes через JavaScript из строки и добавление его во временную таблицу стилей. Вид неряшливый, вот почему мне интересно, как это сделать непосредственно через DOM.

Есть ли способ? Из того, что я видел на некоторых других сайтах, вы можете воспроизводить анимации и останавливать их на определенных ключевых кадрах, но как вы создаете анимации?

источник

2013-12-04 RickyAYoder

Вы должны использовать CSSOM, что позволяет (среди прочего), чтобы манипулировать таблицы стилей, загруженных в документе. Прежде всего, вам нужна таблица стилей, загруженная в ваш документ, где вы добавите правила @keyframe. Если у вас его нет, вы можете динамически создать HTML-код style и добавить его в head. Затем вам нужно получить экземпляр интерфейса CSSStyleSheet, который представляет таблицу стилей, вы можете либо получить свойство sheet элемента HTML style (или link), либо взять его из списка, доступного по адресу document.styleSheets.

После того, как у вас есть объект, вы можете просто вызвать метод , передав все правило в виде строки, а для второго параметра - число, указывающее позицию (перед которым будет добавлено это правило).

Если вы должны манипулировать дальше анимации, дайте взглянуть на API: http://www.w3.org/TR/css3-animations/#dom-interfaces http://www.w3.org/TR/DOM-Level-2-Style/css.html

источник

2013-12-04 19:54:56

Знаете ли вы какие-либо учебные пособия по использованию CSSOM в JavaScript? Как блог или учебный сайт? – RickyAYoder

Я немного искал, но я не нашел много, эта статья - лучшее, что я нашел: http://css-tricks.com/controlling-css-animations-transitions-javascript/. Он делает примеры именно с правилами анимации. –

Я не видел javascript api-решение, но это возможно с помощью CSS-стилей, сгенерированных из javaScript.

Ознакомиться с http://krazyjakee.github.io/jQuery.Keyframes/ если вы используете jQuery.

Если вы whant Чистый JavaScript солитон, то посмотрите на this post

источник

2013-12-04 19:48:37 adam187

Да. Это включает добавление анимации в виде строки в тег стиля. Не то, что я хотел, но я могу это сделать. – RickyAYoder

Как написать анимацию CSS3 с объектами JavaScript?

ответ

Смежные вопросы