CSS3 Custom Animation (animation)

In addition to the CSS3 variants (transformation) and Transformations (transition) described in previous articles, CSS3 also has a more liberal custom animation. Developers can even use Transformations (transformation) and transforms (transition) to make custom animations, using pure CSS to create Flash-like effects. In actual use is not difficult to find, transformation and transformation is more suitable for the interaction of elements, and the custom animation in addition to the interaction can also make the page vitality, with custom animation, using CSS instead of Flash will be more realistic.

First look at the effect of animation--demo.

I. Animation Foundation

The parameters of animation are similar to those of transition, and if you have known transition shoes, you should be familiar with the animation parameters. The specific parameters are as follows:

Animation-name

Animated name, default to None

Animation-duration

Duration of the animation, default is 0

Animation-timing-function

The transition type of the animation, the optional value of the parameter is similar to Transition-timing-function, and the default is ease, as follows:

• Linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
• Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
• Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
• Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
• Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
• Cubic-bezier (number): A specific Bezier type that has a value in the [0, 1] interval

Animation-delay

Time of animation delay

Animation-iteration-count

The number of cycles of the animation, the value of which can be a positive integer, the number of cycles, or set to infinite, an infinite loop, which defaults to 1

Animation-direction

Animation in the loop whether the inverse movement, normal is the positive direction, the alternate is the opposite to the normal and reverse movement, in particular, the first odd number of forward motion, the odd number of times to the opposite direction, the default is normal

Animation-play-state

Represents the state of the animation, the default value is running, which indicates that it is moving and paused is paused. However, it is not recommended to use this property because it is considering whether to remove the property and to represent the state of the animation by resetting the style or otherwise.

123456

#demo {       /* Specify animation name */       animation-name:animation 1 2 ;      /* Specify animation duration */      animation-duration: 2 s 1 s; }

In this way #demo will get two animations at the same time, however, the specific process of animation is not specified, in fact, the specific content of the animation is not specified within the animation, but the other property @keyframes specified, @keyframes specified an animation name and the actual content, and Animation is responsible for specifying the referenced animation for the element and setting the animation's time, transition type, and so on. In this way, the animation's reference and the actual content of the animation are set apart, which can improve the independence and utilization of the animation.

@keyframes supports two settings, for simple animations and complex animations, respectively.

For example, to set a simple linear animation for a #demo to transition its opacity value from 0 linearly to 1, you can specify the initial and end states directly using the From and to

12345678910

#demo {    animation-name: animation1;    animation-duration: 2s;    animation-timing-function: linear; }@keyframes animation1{    from{opacity: 0; }    to{opacity: 1; }}

For complex animations, you need to use percentage, percentage, which is a percentage, animation supports the effect that the animation performs when you specify a percentage with "%", such as specifying that the element pans to the right and then down, so you can write:

1234567891011121314

#demo {    animation-name: animation1;    animation-duration: 2s;    animation-timing-function: linear; }@keyframes animation1{    0% {transform: translate(0); }    20% {transform: translate(120px); }    40% {transform: translate(240px); }    60% {transform: translate(240px, 40px); }    80% {transform: translate(240px, 80px); }    100% {transform: translate(240px, 120px); }}

can also be used with from and to:

1234567891011121314

#demo {    animation-name: animation1;    animation-duration: 2s;    animation-timing-function: linear; }@keyframes animation1{    from {transform: translate(0); }    20% {transform: translate(120px); }    40% {transform: translate(240px); }    60% {transform: translate(240px, 40px); }    80% {transform: translate(240px, 80px); }    to {transform: translate(240px, 120px); }}

Of course, developers can also merge the individual attributes of animation and use animation shorthand directly:

123456789101112

#demo {    animation: animation1 2s linear;}@keyframes animation1{    0% {transform: translate(0); }    20% {transform: translate(120px); }    40% {transform: translate(240px); }    60% {transform: translate(240px, 40px); }    80% {transform: translate(240px, 80px); }    100% {transform: translate(240px, 120px); }}

Please visit the Demo (please use Chrome, Firefox, Safari or Opera to browse, below).

Two. The contents of the animation

Animation with transform can undoubtedly make some good animation, but animation's ability is not limited to this, the wide range of the animation can be used to animate the CSS properties have many kinds, including the width of the element (width), High (height), margin (margin), background (background) and other important properties, please visit the official description of the website. Children who are familiar with jquery will find that animation is similar to the animate () method of jquery, but Animate () supports only numeric type animations, not string values such as color values, and animation is more advantageous at this point, and is a pure CSS implementation. You do not need to include a jQuery library. Of course, compared with JQuery has done a good job of browser compatibility, CSS3 animation is a bit inferior, so it is recommended to animation gradually enhanced in the Web page effects and interactive reinforcement, the end of this article will be discussed.

In addition, the optional value of the transition attribute in transition (Transition-property) also uses the above value.

Three. The difference between animation and transform and transition

Many of the data will be transform and transition directly into the animation, indeed, from a lot of practical use of the example, transform and transition are showing the characteristics of the drawing, but in fact, they still have a big difference:

Transform and transition need to be triggered by the user to show a dynamic effect, these trigger conditions can be: link,: visited,: hover,: Active and: Focus five CSS Pseudo-class, can also be click, Focus and other Ja Vascirpt event, if you set transform or transition directly to an element without setting a trigger condition, the user can see only the end state of the element and no animation process. Animation does not need to trigger the condition, the developer only need to bind the element animation.

In addition, in the old version of animation, animation, transform, and transition all have an important nature--the process is completed after the drawdown, for example: hover trigger transform, after the mouse left the element after the animation automatically reverse playback, When the element returns to the state before transform, animation also rolls back at the end of the animation, but does not play the animation backwards, but jumps directly to the dynamic before the animation plays.

However, after revision, animation adds a very important attribute animation-fill-mode, which controls the state beyond the animation, that is, whether the state of the element before or after the animation is set according to the state of "0%", "100%" in the animation settings, The value of Animation-fill-mode can be none, forwards, backwards, or both, the default is None, that is, the state of "0%", "100%" during animation is not set to the start and end states of the element, backwards and Forwards sets the state of start and end respectively, both sets two states at the same time, such as an example of a translation element above, and if the forwards attribute is added, the element will remain at 100% when the animation is placed without drawdown. Readers can compare the differences between the two according to the Demo below.

Set the Demo for forwards.

With this attribute, animation animation is also more complete, although without this attribute, developers can still set their own desired effect, but animation need to cooperate with other CSS property settings will have the final effect, if not the property set animation will be much more complex.

Four. Browser compatible

Animation compatibility is as follows:

Chrome 13+, Firefox 5+, Safari 5.1+, Opera 12+, ie10+

The latest versions of Chrome, Safari, Opera, and IE (Chrome 22.0.1229.94, Firefox 17.0.1, Safari 5.1.7, Opera 12.12, IE10) require private properties to support ANI Mation, Firefox supports the standard notation.

Although animation's browser support is still a little lacking, but animation's effect is really good, developers may use the progressive enhancement of the design concept, the use of animation to enhance the effect of page elements or interaction, This will undoubtedly improve the user experience for users who use modern browsers.

Of course, if transform or transition are also used in animation, compatibility needs to take into account the browser compatibility of transform or transition. Considering the general situation, Kayo recommends calling animation (with simple animations as an example) using the following method:

1234567891011121314151617181920212223242526

#demo {    -webkit-animation: animation1 2s linear;    -moz-animation: animation1 2s linear;    -o-animation: animation1 2s linear;    animation: animation1 2s linear;}@-webkit-keyframes animation1{    from{opacity: 0; }    to{opacity: 1; }} @-moz-keyframes animation1{    from{opacity: 0; }    to{opacity: 1; }}@-o-keyframes animation1{    from{opacity: 0; }    to{opacity: 1; }}@keyframes animation1{    from{opacity: 0; }    to{opacity: 1; }}

CSS3 Custom Animation (animation)