The method of animation animation property to implement the carousel directly

This time to bring you animation animation properties of the direct implementation of the Carousel method, animation animation properties to realize the rotation of the attention of the matter, the following is the actual case, to see together.

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 placed on the same line, otherwise there will be gaps between the pictures.


Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Focus-within the use of a detailed