![]() Because these two times are so important, they have special aliases: from and to. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a to indicate the time during the animation sequence at which they take place. Each keyframe describes how the animated element should render at a given time during the animation sequence. This is done by establishing two or more keyframes using the at-rule. Once you’ve configured the animation’s timing, you need to define the appearance of the animation. Defining the animation sequence using keyframes animation-play-state Lets you pause and resume the animation sequence. animation-fill-mode Configures what values are applied by the animation before and after it is executing. animation-direction Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-iteration-count Configures the number of times the animation should repeat you can specify infinite to repeat the animation indefinitely. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-timing-function Configures the timing of the animation that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-duration Configures the length of time that an animation should take to complete one cycle. The sub-properties of the animation property are: animation-name Specifies the name of the at-rule describing the animation’s keyframes. This does not configure the actual appearance of the animation, which is done using the at-rule as described in Defining the animation sequence using keyframes below. ![]() This lets you configure the timing, duration, and other details of how the animation sequence should progress. To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. ![]() Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. ![]() The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. Simple animations can often perform poorly in JavaScript (unless they’re well made).
0 Comments
Leave a Reply. |