Using transtion to achieve transition animations

animations are divided into:

1.css3 Animation: (animation performance is much higher than JS)

1). Transition Animation (transition) 　

2). Keyframe Animation (@keyframes, animation) 　

2.js animations:

Transition Animation (Transition)

Syntax: (sometimes long units are seconds )

1. Change attribute (Transition-property (attribute name))

2. Duration (transition-duration (duration)) * This property must be available (the default time is "0")

3. Change Curve (transition-timing-function)

4. Length of delay (transition-delay)

* When the trigger time is lost, the animation will return to its original state.

transition-timing-function: Rate of change

1.ease (default): Fast and slow

2.ease-in: Fade In (animation changes slowly at first)

3,ease-out: Fade out (slow changes at the end of the animation)

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

5.linear: Constant Change

6.cubic-bezier: Bezier curves, all the changes Cubic-bezier (x1,y1,x2,y2) can be substituted with Bezier curves, and the X1,y1,x2,y2 values range from 0~1

Bezier graphs: (The following example will mention, do not do a detailed explanation)

transition animations do not have their own triggering time, only the following, can trigger transitions animation:

1.:hover (most commonly used)

2.:focus

3.:checked (Multi-select input box is checked for status)

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

5.js

<!        DOCTYPE html>