Используя определение ключевых фреймов анимации?

У нас есть такой синтаксис для определения ключевых кадров в файле css:

@-webkit-keyframes fade {
 from {opacity: 1;}
 to {opacity: 0.25;}
}

и мы ссылаемся на это как:

.foo {
 -webkit-animation: fade 1s linear infinite;
}

есть способ просто вставить его, например:

.foo {
 -webkit-animation: (from {opacity: 1;} to {opacity: 0.25;}) 1s linear infinite;
}

Есть ли способ сделать это или вставить элемент "@-webkit-keyframes" в мою таблицу стилей во время выполнения?

Спасибо

1 ответ

Взглянув на W3C CSS Animations WD, синтаксис для стенографического свойства animation:

[<animation-name> || <animation-duration> || <animation-timing-function> || 
 <animation-delay> || <animation-iteration-count> || <animation-direction> || 
 <animation-fill-mode>] [, [<animation-name> || <animation-duration> ||
 <animation-timing-function> || <animation-delay> || <animation-iteration-count> ||
 <animation-direction> || <animation-fill-mode>] ]* 
</animation-fill-mode></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name></animation-fill-mode></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name>

Значение принимает только animation-name, который используется для выбора ключевого кадра, которое предоставляет значения свойств для анимации, затем другими параметрами, которые определяют, как эти правила должны выполняться.

В настоящее время нет строкового синтаксиса, определенного в спецификациях, которые позволяли бы определять встроенное ключевое кадровое фреймворк, вам нужно ссылаться на существующий, используя свойство animation-name. Из спецификаций:

Свойство 'animation-name' определяет список применяемых анимаций. Каждое имя используется для выбора ключевого кадра в-правило, которое предоставляет значения свойств для анимации. Если имя не соответствует какому-либо ключевому кадру, отсутствуют свойства, которые нужно анимировать, и анимация не будет выполняться.

licensed under cc by-sa 3.0 with attribution.