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

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

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

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

    to {
        width:50%;
    }
}

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

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

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

Этот метод работает, но я бы предпочел настроить атрибуты для простоты.

Источник

6 ответов

Решение

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

Источник

Вот способ сделать это с помощью переменных CSS:

      <div style="--from-width:10px; --to-width:20px; animation:slide 1s ease infinite;"></div>

      @keyframes slide {
  from {
    width: var(--from-width);
  }

  to {
    width:var(--to-width);
  }
}

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

Источник

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

<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>

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

Нет ничего невозможного... просто думай вне дел

Источник

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

Источник

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

Источник

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

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

    }

}
Источник
Другие вопросы по тегам