9

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

谢谢

4

1 回答 1

6

看看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目前，规范中没有定义允许在规则中定义内联关键帧的简写语法，您必须使用该属性引用现有的。从规格：

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

于 2013-01-19T01:05:50.890 回答