Question

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

@-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?

Thanks

Answer 1

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>] ]* 

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.

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:

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.