CSS3 learning animation property_html/css_WEB-ITnose

I found the new attribute of animation very interesting, learn it here and organize it!

Browser support :

Internet Explorer 10, Firefox and Opera support the animation attribute;

Safari and Chrome support the alternative -webkit-animation attribute .

Definition and Usage

The animation property is a shorthand property for setting six animation properties:

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

Syntax

 animation: name duration timing-function delay iteration-count direction;

Value description

animation-name

Specifies the keyframe that needs to be bound to the selector name. . 值 描述

animation-name	规定需要绑定到选择器的 keyframe 名称。。 animation-name: keyframename|none;
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。 animation-duration: time;
animation-timing-function	规定动画的速度曲线。 animation-timing-function: value;
animation-delay	规定在动画开始之前的延迟。 animation-delay: time;
animation-iteration-count	规定动画应该播放的次数。 animation-iteration-count: n|infinite（无限次）;
animation-direction	规定是否应该轮流反向播放动画。 animation-direction: normal（正常）|alternate（轮流反向播放）;

animation-duration

Specifies the time it takes to complete the animation, in seconds or milliseconds.

animation-timing-function

Specifies the speed curve of animation.

animation-delay

Specifies the delay before the animation starts.

animation-iteration-count

Specifies the number of times the animation should be played.

animation-direction

Specifies whether the animation should be played in reverse in turn.

值 描述

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

Where

animation-timing-function uses a mathematical function called the Cubic Bezier function to generate the velocity curve. You can use your own values ​​in this function, or predefined values:

Case:

Very practical, an arrow jumps up and down in a loop

#auto{

-webkit-animation:dd 1s infinite;
animation:dd 1s infinite;

}

@keyframes dd{

0% {transform:translate(0, 10px) }

50% {transform:translate(0, 0)}

100% {transform:translate(0, 10px)}

}

@-webkit-keyframes dd{

0% {-webkit-transform:translate(0, 10px)}

50% {-webkit-transform:translate(0, 0)}

100% {-webkit-transform:translate(0, 10px)}

} Note: The animation attribute must be used in conjunction with @keyframes The percentage means the percentage of duration. If duration is not set, it means is infinity. transform:translate(): Meaning - change, displacement; also a new attribute in CSS3.