使用内联动画关键帧定义?

时间:2013-01-19 00:12:19

标签: javascript css

我们有这种语法来定义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 个答案:

答案 0 :(得分:5)

看一下W3C CSS Animations WDanimation速记属性的语法是:

[<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用于选择提供动画属性值的关键帧at-rule,然后是定义如何执行这些规则的其他参数。

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

  

'animation-name'属性定义了适用的动画列表。每个名称用于选择提供动画属性值的关键帧at-rule。如果名称与任何关键帧at-rule不匹配,则没有要动画的属性,并且动画将不会执行。