Transitions property of CSS3 animation property and function realization of animations property

This article brings the content is about the CSS3 animation properties of the Transitions property and animations attributes of the function of the implementation, there is a certain reference value, the need for friends can refer to, I hope to help you.

1 transitions function

(1) Browser support:

So far: Safari3.1 above, Chrome8 above, Firefox4 above, Opera10 above, IE11 above the browser support this feature.

(2) function

In CSS3, the Transitions feature animates functionality by smoothing the transition of an element's properties from one property value to another in a specified time period.

(3) How to use

Transition:property Duration Timing-function

Property: Represents a smooth transition to which attribute .

Duration: Indicates how long it takes to complete a property to smooth the transition.

Timing-function: Represents a smooth transition by what means.

Div{background-color: #ffff00; transition:background-color 1s linear;//transitions the background color of the div element from yellow to light blue within 1 seconds. }div{background-color: #00ffff;}

(4) Another way to use

Transition-property:background-color;transition-duration:1;transition-timing-function:linear;

(5) Transition-delay Property

Specifies how long the transform animation effect is delayed to start executing. You can specify the value of the property in seconds units or milliseconds.

transition-delay:1s;//or transition:background-color 1s linear 2s; (write delay time in fourth parameter)

(6) Smooth transition of multiple property values while using the Transitions function

transition:background-color 1s linear,color 1s linear,width 1s linear;

(7) Animation effects such as movement, rotation, etc.

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 specify only the start and end values of a property, and then smooth transitions between the two property values, and you cannot achieve more complex animation effects.

2 animations function

(1) Browser support:

So far: Safari4 above, Chrome2 above, Firefox20 above, Opera18 above, IE11 above the browser support this feature.

(2) function

As with the transitions function, the animation effect is achieved by changing the attribute value of the element.

Difference: The animations feature enables more complex animation effects by defining multiple keyframes and defining attribute values for elements in each keyframe.

(3) Create a collection of keyframes

@keyframes key Frame set name {Create Keyframe's code}

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

40%{the style code in this keyframe}

(40% indicates that the frame is 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 this keyframe in the style of the element

Div{animation-name:my-color;//Specifies the name of the Keyframe collection animation-duration:5s;//Specifies the time it takes to complete the entire animation animation-timing-function:linear ;//Specify how animations are implemented}

(6) Other properties

Animation-delay: Used to specify how many seconds or milliseconds to delay before the animation starts.

Animation-iteration-count: Specifies the number of times the animation is executed, which can be specified as infinite (unlimited).

Animation-direction: Used to specify the direction in which the animation is executed. You can specify property values including:

• Normal: Initial value (returns to the initial state after the animation has finished executing)

• Alternate: Alternate animation direction of execution

• Reverse: Performing animations in the opposite direction

• Alternate-reverse: Alternately change the direction of execution of an animation from the opposite direction

(7) When defining a animation animation in one line of style code, use the notation shown below

Animation:keyframe name animation Implementation of a time-long animation delay how many seconds after the execution of the animation animation execution direction starts;

(8) Animating multiple property values at the same time

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

3 Ways to implement animations

Method	Rate of change in property values
Linear	Change at the same speed at the beginning of the animation and at the end
Ease-in	The animation starts at a slow speed and then speeds up along the curve value
Ease-out	The animation starts very fast , and then slows down the curve value.
Ease	The animation starts very slowly , then speeds up along the curve value, then slows down along the curve value
Ease-in-out	The animation starts very slowly , then speeds up along the curve value, then slows down along the curve value

4 fade-In effect for Web pages

The fade-in effect is achieved by changing the property value of the page's opacity property in the start frame and end frame.

@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; }