Css3 animation attributes-animation (animation), css3-animation

Css3 animation attributes-animation (animation), css3-animation

Animations in CSS 3 are different from those in Canvas HTML5. animations are only applied to existing DOM elements on the page.

You can use animation to create some animation effects you want, but it is a bit rough.

Before learning about animation, you must know"Keyframes", We call it" Key Frame ".

KeyframesWith its own syntax rules, its name is"@ Keyframes"At the beginning, followed by the" animation name "and a pair of curly braces" {} ", there are some style rules in the brackets for different time periods, a bit like our css style Writing. A style rule in "@ keyframes" consists of multiple percentages, for example, "0%" to "100%". We can create multiple percentages in this rule, we add different attributes to each element in each percentage that requires an animation effect, so that the element can achieve a changing effect, such as moving, changing the color and position of the element, size and shape. However, we can use "from" and "to" to indicate where an animation starts and ends, that is to say, this "from" is equivalent to "0%" and "to" is equivalent to "100%". It is worth mentioning that "0%" cannot omit the percentage symbol like other attribute values, we must add a percentile ("%") here. If it is not added, keyframes is invalid and does not work.

The unit of keyframes only accepts the percentage value.

The animation of CSS3 is similar to the transition attribute. They all change the element's attribute values over time. Their main difference is thatTransition needs to trigger an event(Hover event or click event) will change its css attributes over time; however, animation can explicitly change the attribute value of element css over time without triggering any event to achieve an animation effect.

Animation has the following attributes:

1. animation-name;

2. animation-duration;

3. animation-timing-function;

4. animation-delay;

5. animation-iteration-count;

6. animation-direction;

7. animation-play-state
Next we will introduce them one by one:

Animation-name:

It is used to define the name of an animation. none is the default value. When the value is none, there will be no animation effect.

Animation-duration:

Used to specify the duration of an element playing an animation.

Animation-timing-function:

You can play an animation in the following ways: embedding, embedding-in, embedding-in-out, linear, and cubic-bezr.

Animation-delay:

Specifies the animation delay time of an element.

Animation-iteration-count:

Specifies the number of cycles for an element to play an animation. The value <number> is a number, and the default value is "1". infinite is an infinite number of cycles.

Animation-direction:

This parameter specifies the playback direction of an element animation. It has only two values. The default value is normal. If it is set to normal, each loop of the animation is played forward. The other value is alternate, the role of this operator is to play the animation forward for the nth even time, and play the odd number in the reverse direction.

Animation-play-state:

Used to control the playback status of element animations. There are two main values: running and paused. Running is the default value. You can use paused to stop an animation that is being played, or use running to play the paused animation again. If the animation is played temporarily, the element style will return to the original setting state.

The following shows how to call animation:

. Demo {width: 50px; height: 50px; margin-left: 100px; background: blue;-webkit-animation-name: 'ani-name';/* animation attribute name, that is, the animation name defined by keyframes */-webkit-animation-duration: 10 s;/* animation duration */-webkit-animation-timing-function: animation-in-out;/* animation frequency, which is the same as transition-timing-function */-webkit-animation-delay: 2 s; /* animation delay time */-webkit-animation-iteration-count: 10;/* define cyclic data. infinite is infinite times */-webkit-animation-direction: alternate; /* define the Animation Mode */}

It can also be abbreviated:

.demo {     -webkit-animation:'ani-name' 10s ease-in-out 2s 10 alternate;}