![[+]](https://yt3.ggpht.com/ytc/AAUvwnjyOwpXIXP-qmSqozYyDuckEnXOHNPP_WcT6Xnwgw=s88-c-k-c0x00ffffff-no-rj)
MICHEAL JACKSON MOONWALKING ANIMATION
CSS allows animation of HTML elements without
using JavaScript or Flash!
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
There are three key advantages to CSS animations over traditional script-driven animation techniques:
- They’re easy to use for simple animations; you can create them without even having to know JavaScript.
- The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
- 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.
Configuring the animation
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using keyframes below.
The sub-properties of the animation property are:
animation-name- Specifies the name of the
@keyframesat-rule describing the animation’s keyframes. animation-duration- Configures the length of time that an animation should take to complete one cycle.
animation-timing-function- Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
animation-delay- Configures the delay between the time the element is loaded and the beginning of the animation sequence.
animation-iteration-count- Configures the number of times the animation should repeat; you can specify
infiniteto repeat the animation indefinitely. 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-fill-mode- Configures what values are applied by the animation before and after it is executing.
animation-play-state- Lets you pause and resume the animation sequence.
Defining the animation sequence using keyframes
Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to. Both are optional. If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.
You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.
10 STEPS TO CREATE:
Post a Comment