Transtion: Transition animation, transtion transition Animation

Transtion: Transition animation, transtion transition Animation

Animations are divided:

1.css 3: (animation performance is much higher than js)

1) transition animation (transition)

2). Key Frame animation (@ keyframes, animation)

2. js Animation:

 

Transition Animation)

 

Syntax: (sometimes the unit is seconds)

1. Change attributes (transition-property (property name ))

2. duration (transition-duration (duration) * This attribute must exist (the default time is "0 ")

3. transition-timing-function)

4. delay duration (transition-delay)

* When the trigger time is lost, the animation returns the original state.

 

Transition-timing-function: Change Rate

1. Seek (default): fast and slow

2. Fade-in: fade in (the animation changes slowly at the beginning)

3. fade-out: fades out (the animation changes slowly at the end of the animation)

4. Fade-in-out: fade in and out

5. linear: constant speed

6. cubic-besuppliers: The besell curve. All the changes can be replaced by the besell curve, such as x1, y1, x2, y2, x1, y1, x2, the y2 value ranges from 0 ~ 1

Besell curve chart:(The example below will be mentioned, but I will not explain it in detail)

 

Transition animations do not have their own triggering time. They can be triggered in the following ways:

1.: hover (most commonly used)

2.: focus

3.: checked (the status selected in the Multi-choice input box)

4. media query (@ media screen and (condition) {style })

5. js

1 <! DOCTYPE html> 2