javascript - 使用内联动画关键帧定义？

Question

我们有这种在 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”元素注入(inject)我的样式表？

谢谢

Answer 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-name用于选择为动画提供属性值的关键帧规则，后跟定义这些规则应如何执行的其他参数。

规范中目前没有定义允许定义内联关键帧规则的速记语法，您必须使用 animation-name 属性引用现有的关键帧。来自specs :

The 'animation-name' property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute.