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
To create an action in a digital animation sequence, you first need to define the start and end points for that action. These markers are called keyframes, and they're used as anchor points for actions in all different types of animation programs, including Adobe After Effects, Animate, and Character Animator.
In animation and filmmaking, a key frame (or keyframe) is a drawing or shot that defines the starting and ending points of a smooth transition. These are called frames because their position in time is measured in frames on a strip of film or on a digital video editing timeline.
Definition and Usage The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
A keyframe, also written as “key frame”, is something that defines the starting and/or ending point of any smooth transition. That something can be a drawing in animation or a particular frame of a shot when dealing with film or video. Any shot, animated or live-action, is broken down into individual frames.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With