使用内联动画关键帧定义？ [英] Using an inline animation keyframes definition?

问题描述

我们有这样的语法在css文件中定义关键帧：

We have this sort of syntax for defining key frames in a css file:

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

，我们引用它：

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

有一种方法可以内联它，如：

is there a way to just inline it, like:

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

是否有办法，或者注入一个@ -webkit -keyframes元素到运行时的样式表中。

Is there a way to do that, or to inject a "@-webkit-keyframes" element into my stylesheet at runtime?

感谢

推荐答案

>请参阅 W3C CSS动画WD ， 动画速记属性的语法是：

Taking a look at the W3C CSS Animations WD, the syntax for the animation shorthand property is:

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

Meaning it takes only the animation-name which is used to select the keyframe at-rule that provides the property values for the animation, followed by the other parameters which define how these rules should be executed.

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

There's currently no shorthand syntax defined in the specs that would allow for defining an inline keyframe at-rule, you have to reference an existing one using the animation-name property. From the specs:

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

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.

这篇关于使用内联动画关键帧定义？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！