[英]Using an inline animation keyframes definition?
We have this sort of syntax for defining key frames in a css file: 我们使用以下语法在css文件中定义关键帧:
@-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}
and we reference it like: 我们引用它像:
.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;
}
Is there a way to do that, or to inject a "@-webkit-keyframes" element into my stylesheet at runtime? 有没有办法做到这一点,或者在运行时将“ @ -webkit-keyframes”元素注入样式表?
Thanks 谢谢
Taking a look at the W3C CSS Animations WD , the syntax for the animation
shorthand property is: 看一下W3C CSS动画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>] ]*
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
,该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. 规范中目前没有定义可用于定义内嵌关键帧规则的速记语法,您必须使用
animation-name
属性引用现有的关键帧。 From the specs : 从规格 :
The 'animation-name' property defines a list of animations that apply.
“ animation-name”属性定义了适用的动画列表。 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.
如果名称与任何关键帧规则都不匹配,则没有要设置动画的属性,并且动画将不执行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.