css3 animation attribute animation (animation)_html/css_WEB-ITnose

Animation in CSS3 is different from Canvas drawing animation in HTML5. Animation is only applied to DOM elements that already exist on the page.

Using animation can create some animation effects you want, but it is a bit rough.

Before understanding animation, you must know "Keyframes", we call it "keyframe".

Keyframes has its own syntax rules. Its name starts with "@keyframes", followed by the "name of the animation" Add a pair of curly brackets "{}", and the brackets contain some style rules for different time periods, a bit like how we write CSS styles. For a style rule in "@keyframes" that is composed of multiple percentages, such as between "0%" and "100%", we can create multiple percentages in this rule, and we give each percentage a Elements with animation effects need to be added with different attributes, so that the elements can achieve a constantly changing effect, such as moving, changing element color, position, size, shape, etc. However, one thing to note is that we can use "From" and "to" represent where an animation starts and ends. In other words, "from" is equivalent to "0%" and "to" is equivalent to "100%". It is worth mentioning that, Among them, "0%" cannot omit the percent sign like other attribute values. We must add the percent sign ("%") here. If not, our keyframes will be invalid and will have no effect.

The unit of keyframes only accepts percentage values.

CSS3 animation is similar to the transition attribute. They both change the attribute value of the element over time. The main difference between them is that transition needs to trigger an event (hover event or click event, etc.) before it can change its css properties over time; animation can also change explicitly without triggering any events. Time changes to change the attribute value of the element's CSS to achieve an animation effect.

animation mainly 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:

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:

is used to specify the duration for the element to play animation.

animation-timing-function:

There are six ways to play animation: ease;ease-in;ease-in- out; linear; cubic-bezier.

animation-delay:

Specifies the time for element animation delay.

animation-iteration-count:

Specifies the number of cycles for the element to play animation, which can take the value as a number, and The default value is "1"; infinite is an infinite number of loops.

animation-direction:

is used to specify the direction of element animation playback. It has only two values. The default value is normal. If set When it is normal, each cycle of the animation plays forward; the other value is alternate, and its function is that the animation plays forward in the even-numbered times and in the reverse direction in the odd-numbered times.

animation-play-state:

is used to control the playback state of element animation. There are two main values, running and paused. running is the default value. The currently playing animation can be stopped by paused, or the paused animation can be replayed by running. If the animation is temporarily stopped, the element's 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';/*动画属性名，也就是我们前面keyframes定义的动画名*/     -webkit-animation-duration: 10s;/*动画持续时间*/     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/     -webkit-animation-delay: 2s;/*动画延迟时间*/     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/     -webkit-animation-direction: alternate;/*定义动画方式*/}

It can also be abbreviated:

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