CSS Transitions and animations

a . Transitions

1. definition: the CSS property values in a period of time to reflect the gradual change of the process;

2. Specify transition Properties

2.1 function: Specify which or which attribute values, in the change need to use the transition effect to reflect;

2.2 Property:transition-property Value: attribute name example:transition-property:background;

2.3 Note: The properties allowed to set the transition effect are as follows

color properties, values for numeric properties, conversion properties (transform), gradient properties, shadow properties, Visibility Properties

3. Specify the transition duration

3.1 Effect: Specifies how long to complete the transition operation

3.2 Property:transition-duration value:s/ms

4. Specify the transition speed time function

4.1 Property transition-timing-function

4.2 Value: (1) default value,ease indicates slow start fast change slow End (2)linear constant Speed (3 )ease-in slow start at constant speed (4)ease-out fast start slow end (rate differs from 1 ) ( 5)ease-in-out slow start and end

5. Specify the transition delay time transition-delay: time

6. where the transition was written

6.1 allows the transition properties to be written in the style of the element declaration ;

6.2 Trigger transition effect style (hover)

Two Animation

1. definition: To gradually change elements from one style to another, animation is a complex transition effect. Animation is a keyframe that controls every step of the animation.

Keyframe: What is the state and style of the element at a point in time.

2. steps to use the animation:

2.1 declaration Animation:

@keyframes Animation name {

/* define all key frames in the animation */

0%{ style at start of animation }

100{ the style at the end of the animation }

}

3. Animation Properties

3.1 Animation-name The name of the specified animation

3.2 animation-duration Specifies the duration of a cycle performed by the animation

3.3animation-timing-function

3.4 Animation-delay

3.5animation-iteration-count Effect: Specifies the number of times the animation is played; value:1. specific values; 2.infinite Infinite Times

3.6.animation-direction Specifies the direction of playback of the animation, normal playback alternate rotation, even several times the positive play, odd number of times when the counter-attack play

the concise wording of the Animation:animation:name duration timing-function delay iteration-countdirection

3.7 Animation-fill-mode

Definition: Specifies the state of the animation before and after playback;

value:3.7.1 None: The default behavior does not change;3.7.2 forwards when the animation is finished, it remains in the state of the last frame;3.7.3 backwards In the delay time before the animation plays, the animation will remain in the state of the first frame;3.7.4 both:forwards+backwards

3.8 Animation-play-state: Specifies the playback state of the animation

value:pasuse animation pause;running: animation playback

CSS Transitions and animations