Eight, the animation function in CSS3

The animation function in CSS3 is divided into transitions function and animations function, both of which can produce animation effect by changing the value of the property in CSS, and we will introduce the following two functions.

1. Transitions function

How to use 1.1 transitions function

In CSS3, the Transitions feature animates functionality by smoothing the transition of an element's properties from one property value to another for a specified time, using the following method:

Transition: Attribute Name transition interval Transition method delay time, the first attribute value represents a smooth transition to which property, the second property represents a smooth transition of the property value over a long period of time, and the third property value represents the method by which the transition is made. The fourth attribute value indicates how long the transform effect is delayed to begin execution. use commas to separate multiple property values while smoothing transitions .

The sample code is as follows, note the difference between transition placed in different elements:

1??

transform1{    Transform:translatez (50px);    Background:  red;    Margin-top:  50px;    width:200px;    transition:width 2s linear 1s;}. transform1:hover{    width:300px;}

2??

transform1{    Transform:translatez (50px);    Background:  red;    Margin-top:  50px;    width:200px;}. transform1:hover{    width:300px;        transition:width 2s linear 1s;}

1.2 The disadvantage of animating with the Transitions feature is that 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. In CSS3, in addition to using the Transitions feature, you can use the animations feature to animate, which allows for more complex animation effects on the page with the designation of keyframes.

2. Animations function

How to use 2.1 animations function

When using the animations feature, use the following method to create a collection of keyframes: @keyframes keyframe collection name {Create Keyframe code}

Code to create keyframes: 40%{style code in this keyframe}

The 40% here means that the frame is 40% at the end of the entire animation process, the start frame is 0%, and the ending frame is 100%.

Animation animations can be defined on a single line: Animation:keyframe name Animation execution interval Animation implementation method Animation delay time animation execution (Infinite Unlimited) direction of animation execution

2.2 Animating multiple property values at the same time

2.3 Ways to implement animations

(1) Linear: At the beginning of the animation and at the end of the same speed to change

(2) Ease-in: The animation starts at a very slow speed, then the speed curve value is accelerated

(3) Ease-out: The animation starts at a very fast speed and then slows down the curve value

(4) Ease: The animation starts at a very slow speed, then the speed curve value is accelerated, and then the speed curve value is slowed down

(5) Ease-in-out: The animation starts at a very slow speed, then the speed curve value is accelerated, and then the speed curve value is slowed down

2.4 Fade-in effect for Web pages

Changes the property value of the page's Opacity property in the start and end frames.

Eight, the animation function in CSS3