Kidney Fun version CSS tutorial Chapter7 transition&animation

Chapter 7 transition&animation

Version	Update	Note
1.0	2016-6-11	Added for the first time. You are welcome to indicate errors in the comments, revise them as soon as they are verified, and indicate contributors.

1, transition

The role of transition is to increase the timeline properties between state changes, rendering them a dynamic effect of smooth transitions.

It is shorthand for the following four properties:

1.1 Transition-property

Sets the properties that participate in the transition. Animated properties will have a transition effect.

Value: Property name (multiple attribute names separated by commas), all

1.2 transition-duration

Sets the duration of the transition.

1.3 Transition-timing-function

Sets the time curve type.

Accepted value: Linear ease ease-in ease-out ease-in-out

Cubic-bezier (n, N, N, N) (Bezier curve)

1.4 Transition-delay

Set the delay time.

2, Animation

To set an animation, you first define the animation with @keyframes. Its working principle is to set the style of each frame, and flash animation, video production principle is the same. The time of each frame is set with a percentage. The two adjacent frames use transition changes.

@keyframes name{

0%{}

20%{}

100%{}

}

The end can also be replaced with the keyword from and to, and is not required. Because the state of the default first and last frames is the original style.

Animation is shorthand for the following eight properties:

2.1 Animation-name

Specifies the animation name.

2.2 Animation-duration

Specifies the duration of the animation.

2.3 Animation-timing-function

Similar to Transition-timing-function

JQuery.easing.js provides more preset time curves, which are all set based on Bezier curves.

2.4 Animation-delay

Set the delay.

3. Animation control

3.1 Animation-iteration-count

The iteration represents a loop. This property is used to specify the number of loops.

Value: number, infinite (infinite loop)

3.2 Animation-direction

Sets the direction in which the animation plays.

Value: Normal (default forward), reverse (reverse), alternate (positive and negative), Alternate-reverse ("anyway" alternating)

To set alternate playback, you need to ensure that the number of loops is greater than 1.

3.3 Animation-play-state

Value: Running,pause is used to set pause and play.

3.4 Animation-fill-mode

Lets you set the state style before and after the animation begins.

None (the default value) remains intact before and after the start.

Forwards, the state of the last frame is maintained after the animation ends. If the last frame is not set, the last frame defaults to the original state.

Backwards, the style of the first frame is maintained before the animation starts, and only works during Animation-delay.

This "first frame" depends on the direction of the animation, if it is positive, then "first frame" is 0% frames, if reverse, then "first frame" is 100% frames.

Both, while applying forwards and backwards rules.

More details can be found in: Https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Kidney Fun version CSS tutorial Chapter7 transition&animation