Using definition of keyframes of animation?

Question

We have this syntax for defining keyframes in a css file:

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

and we refer to it as:

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

there is a way to just insert it, for example:

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

Is there a way to do this or insert the element "@ -webkit-keyframes" into my stylesheet at runtime?

thanks

Answer 1

Looking at the W3C CSS Animations WD , the syntax for the shorthand animation 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>] ]* 

The value accepts only the animation-name , which is used to select a keyframe that provides property values ​​for the animation, then with other parameters that determine how these rules should be followed.

There is currently no string syntax defined in the specifications that would allow you to define an embedded keyframe framework; you need to reference an existing one using the animation-name property. From the specifications :

The 'animation-name' property determines the list of animations used. Each name is used to select a keyframe in the rule, which provides property values ​​for the animation. If the name does not match any keyframe, there are no properties that need to be animated and the animation will not run.