Learn the front-end development from scratch-15, CSS3 Deformation Foundation transition, animation

First, CSS3 transition

Syntax: Transition: Transition Attribute transition time delay time transition mode;

1. Transition properties (Transition-property)

Value: all changed CSS properties add Transitions

Eg:transition:all 1s;

Ident specifying a list of CSS properties to transition

Eg:transition:border-radius 1s,background 2s;

None Transitions without attributes

Note: We can omit transition properties that slip over a state or other state, but cannot omit the transition property of the initial state

2. Transition time (Transition-duration)

Value: 0 No transition

Time set a positive number in s

Eg:transition:all 1s;

3. Delay Time (Transition-delay)

Value:

0 No delay, transition animation normal execution

Positive transitions perform transition animations at set time delay

The animation before the negative setting time will be truncated

4. Transition mode (transition-function)

Value:

Ease mitigation effect, default value

Linear Uniform Motion

Ease-in Acceleration Movement

Ease-out deceleration movement

Ease-in-out slow-fast-slow

Second, CSS3 animation

Syntax: Animation: Animation name animation execution time animation delay execution Time animation plays the state after the animation plays;

Animations are made up of keyframes of a frame-by-frame, defining animation keyframes before setting animation:

Grammar:

@keyframes Animation Name {
0%{
Attribute: property value;
}
50%{
Attribute: property value;
}
...
100%{
Attribute: property value;
}
}

@keyframes Animation Name {
from{
Attribute: property value;
}
...
to{
Attribute: property value;
}
}

1. Animation name (Animation-name)

Eg:animation:ball 1s;

Note: The animation name should match the animation name in @keyframes

2. Time required for the animation to execute once (animation-duration)

Value:

Time: Positive number in seconds (s) or milliseconds (ms), default = 0, no animation

3. Time of animation delay execution (Animation-delay)

Value:

0: Default value, no delay

Positive: Perform animation at set time delay

Negative: The animation before setting time will be truncated

4. Set the number of times the animation plays (Animation-iteration-count)

Value:

Number can be set to a positive integer

Infinite Infinite loop playback

5. Set the state of the object Animation (animation-play-state)

Value:

Running default value, motion

Paused animation Pause

6. Set the playback mode of the animation (animation-timing-function)

Value:

Ease

Linear Uniform Motion

Ease-in

Ease-out

Ease-in-out

Step-start immediately jumps to the end of the animation or immediately jumps to the next frame with no transitions in the middle

Step-end the state at the beginning of the animation until the end of the animation, jumps to the end of the animation state

Steps (N,start|end)

n means the animation is done in a few steps

7. Set the motion direction of the object Animation (animation-direction)

Value:

Normal default value, motion in the correct direction

Reverse the opposite movement in normal direction

Alternate odd number of times positive direction, even number of times opposite direction

Alternate-reverse odd number of times opposite direction, even several times positive direction

8. Set the state outside the object animation time (Animation-fill-mode)

Value:

None default, does not set the state outside the object animation

Forwards keep the state at the end of the animation

Backwards keep the state of the animation at the beginning

Both follows the two rules of forwards and backwards

Extended:

Hides the back of the deformed element backface-visibility:hidden;

Learn the front-end development from scratch-15, CSS3 Deformation Foundation transition, animation