Implementation of the functions of Transitions property and Animations property of css3 animation property

The content of this article is about the functional implementation of the Transitions attribute and Animations attribute of CSS3 animation attributes. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1 Transitions function

(1) Browser support:

So far: Safari3.1 or above, Chrome8 or above, Firefox4 or above, Opera10 The above browsers and IE11 or above support this function.

(2) Function

In CSS3, the Transitions function implements the animation function by smoothly transitioning an attribute of an element from one attribute value to another within a specified time.

(3) Usage method

transition: property duration timing-function

property: indicates which Property for smooth transition.

duration: Indicates how long time will take to complete the smooth transition of attribute values.

timing-function: Indicates what method is used to make a smooth transition.

div{
background-color：#ffff00;
transition：background-color 1s linear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。
}
div{
background-color：#00ffff；
}

(4) Another usage method

transition-property：background-color；
transition-duration：1；
transition-timing-function：linear；

(5) transition-delay attribute

Specify the transformation animation special effects DelayHow long to start execution . Property values ​​can be specified in seconds or milliseconds.

transition-delay：1s；
//或 transition：background-color 1s linear 2s；（在第四个参数中书写延迟时间）

(6) Use the Transitions function to smoothly transition multiple attribute values ​​at the same time

transition：background-color 1s linear，color 1s linear，width 1s linear；

(7) Animation effects such as movement and rotation

img{
position：absolute；top：70px；left：0；
transform：rotate（0deg）；
transition：left 1s linear，transform 1s linear；
}
 img：hover{
left：30px；
transform：rotate（720deg）；
}

(8) Disadvantages

You can only specify the start value and end value of the attribute, and then achieve a smooth transition between the two attribute values. More complex animation effects cannot be achieved.

2 Animations function

(1) Browser support:

So far: Safari4 or above, Chrome2 or above, Firefox20 or above, Opera18 or above, IE11 and above browsers support this function.

(2) Function

The function is the same as Transitions, both of which achieve animation effects by changing the attribute values ​​of elements.

Difference: The Animations function achieves more complex animation effects by defining multiple keyframes and defining the attribute values ​​of elements in each keyframe.

(3)Create a collection of keyframes

@keyframes keyframe collection name {Code to create keyframes}

(4)Code to create keyframes (similar to the following)

40%{style code in this keyframe}

(40% means that the changed frame is located at 40% of the entire animation process , the start frame is 0% and the end frame is 100%)

@keyframes mycolor{
0%{
background-color：red;
}
40%{
background-color：darkblue;
}
70%{
background-color：yellow;
}
100%{
background-color：red;
}
}

(5) Use the collection of keyframes in the style of the element

div{
animation-name：my-color； //指定关键帧集合的名称
animation-duration：5s； //指定完成整个动画所花费的时间
animation-timing-function：linear； //指定实现动画的方法
}

(6 )Other attributes

animation-delay: used to specify how many seconds or milliseconds to delay before starting the animation.

animation-iteration-count: used to specify the number of executions of animation, which can be specified as infinite.

animation-direction: used to specify the execution direction of animation. Specifiable attribute values ​​include:

• normal: initial value (returns to the initial state after the animation is executed)

• alternate: alternate execution of animation Direction

• reverse: Execute the animation in the reverse direction

• alternate-reverse: Alternately change the execution direction of the animation starting from the reverse direction

(7) When defining the animation animation in a line of style code, use the following writing method

animation: the name of the keyframe, the execution time of the animation, the implementation method of the animation, how many seconds to start after the delay The number of times to execute the animation. The execution direction of the animation;

(8) To implement animation in which multiple attribute values ​​change at the same time.

You only need to specify these attribute values ​​​​at the same time in each key frame. .

3 实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

4 实现网页的淡入效果

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

@keyframes fadein{
0%{
opacity：0；
background-color：white;
}
100%{
opacity：1；
background-color：white;
}
body{
animation-name： fadein； 
animation-duration：5s； 
animation-timing-function：linear； 
animation-iteration-count：1；
}

相关推荐：

css3动画属性animation（动画）_html/css_WEB-ITnose

CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose

The above is the detailed content of Implementation of the functions of Transitions property and Animations property of css3 animation property. For more information, please follow other related articles on the PHP Chinese website!