The method of using CSS3 animation animated property to realize the effect of the carousel diagram

CSS3 's Animation property allows for more complex animation effects by controlling keyframes to control every step of the animation, just like Flash animation. The following through this article to share based on CSS3 animation animation properties to achieve the effect of the carousel, need to refer to the friend

Animation Introduction:

CSS3 's Animation property allows for more complex animation effects by controlling keyframes to control every step of the animation, just like Flash animation. The Ainimation animation effect is composed of two main parts:

1) Declare an animation by a frame similar to the one in Flash animation;

2) The animation of the Keyframe declaration is called in the animation property.

Animation Property Value:

The animation property is a shorthand property

Syntax: animation:name duration timing-function delay iteration-count direction;

Animation set the six animation properties:

Animation-name: Specifies the keyframe name that needs to be bound to the selector. Value:

None: (default) specifies no animation effect (can be used to override animations from cascading).

Keyframename: Specifies the name of the keyframe that needs to be bound to the selector.

Animation-duration: Specifies the time, in seconds or milliseconds, that the animation will take to complete. Value:

Time: Specifies how long it takes to complete the animation. The default value is 0, which means there is no animation effect.

Animation-timing-function: Specifies the speed curve of the animation. Value:

Ease: Default. The animation starts at low speed, then accelerates and slows down before it ends.

Linear: The speed of the animation is the same from beginning to end.

Ease-in: The animation starts at low speed.

Ease-out: The animation ends at low speed.

Ease-in-out: Animations start and end at low speed.

Cubic-bezier (N,n,n,n): Defines its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1.

Animation-delay: Specifies the delay before the animation begins. Value:

Time: (optional) defines how long to wait before the animation starts, in seconds or milliseconds. The default value is 0.

Animation-iteration-count: Specifies the number of times the animation should play. Value:

N: Defines the number of times the animation plays.

Infinite: Specifies that animations should be played on an unlimited number of times.

Animation-direction: Specifies whether the animation should be rotated in reverse. Value:

Normal: Default value. The animation should play normally.

Alternate: animations should rotate backwards.

Animation animation for Carousel Mapping

<! DOCTYPE html>
 The picture label should be on the same line or there will be a gap between the pictures.