Можете ли вы изменить встроенные атрибуты ключевого кадра CSS3 (т.е. В атрибуте стиля HTML)?

Можно ли изменить атрибуты ключевого кадра анимации, введя встроенные корректировки.

Возьмем, например,

@-moz-keyframes slidein {
    from {
        width: 10%;
    }

    to {
        width:50%;
    }
}

Можно ли изменить атрибут width в разделе "to" ключевого кадра, выполнив что-то вроде

<div id="someID" style="change keyframe here">

Пока я просто динамически создаю таблицу стилей на странице, чтобы настроить ключевые кадры.

Этот метод работает, однако я бы скорее скорректировал атрибуты inline для простоты.

Ответ 1

Нет. так как анимация не является объявлена  в элементе, она только называется. Это похоже на попытку добавить методы в объект вместо класса. Невозможно, извините;)

Ответ 2

Эй, давайте подумаем немного по-другому... Возможно, вы не сможете этого сделать...

<div id="someID" style="change keyframe here">

но подумайте, как это сделать...

<script>
var createdStyleTag = document.createElement("style");
createdStyleTag.textContent = "@-*whatevaVendor*-keyframes someAnimationName{"+
    "from { width: **SOMETHING YOU DECLARE THROUGH JS**; }"+
    "to{ width: 10%; }"+
"}";

document.body.appendChild(createdStyleTag);
</script>

Это довольно открыто для того, что вы хотите сделать... у вас всегда будут классы, которые вы будете накладывать на элементы, но иногда мы не хотим постоянно иметь одинаковые "от" и "до", поэтому это может быть одним из способов для этого... в основном вы динамически создаете элемент стиля, добавляете любую строку, которая в конечном итоге станет необходимым текстом стиля, а затем добавит его в тело... работает очень хорошо... используется в моих собственных рамках... Я не делаю этого точно так, как это, но я написал это как это для видимости... причина, почему это работает в хорошем смысле, потому что большая часть моего DOM создается динамически, так что это может иметь больше смысла в этой реализации...

Ничего нельзя... просто подумайте за пределами div

Ответ 3

Я искал решение для встроенного ключевого кадра. По крайней мере, для значения "to". CSS-трюки дают хорошее решение, просто забудьте "to" и поместите ширину inline;) http://css-tricks.com/animate-to-an-inline-style/

Ответ 4

Это решение очень похоже на то, которое вы, возможно, уже реализуете, но оно очень хорошо объяснено и продумано: Установить значения ключевого кадра Webkit с использованием Javascript Variable

Ответ 5

как @Zetura сказал, что лучший способ сделать это - забыть свойство "to", и оно примет значение по умолчанию ширины или высоты или любую вещь, которую вы положите на как пример для меня его работы:

@keyframes slideInUp {
    0% {
        height: 0px;

    }

}