CSS3 Advanced -7 CSS Animations (overview, keyframes, animation properties)

I. Overview of animations

Animation concepts

-transition properties can only simulate animation effects

-Animation properties to make Flash animations like

-Control every step of the animation with keyframes

-Gradually change the element from one style to another

-Achieve complex animation effects

-Browser compatibility

-The latest version supports good

-Chrome and Safari need prefix-webkit-

-FireFox needs a prefix-moz-

-Opera requires a prefix-o-

Animation examples

-Declare animations

-Create a named animation

-Use @keyframes to declare keyframes for animations

-Invoke animations for elements

-Invoke animations on elements using the animation property

-Set the playback time of the animation, the number of plays, etc.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/EA/wKiom1bydW_wg_uoAAE53mwUtd4587.png "title=" Web.png "alt=" Wkiom1bydw_wg_uoaae53mwutd4587.png "/>

Second, key frame

The role of @keyframes

-@keyframes rules for declaring animations

-Specify KeyFrames

-Frames for breaking animation actions

-Each frame represents a point in time

-Define the actions on each frame

Syntax for @keyframes

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/EA/wKiom1bydzbBaOIQAAEd8vrbkP8207.png "title=" Web.png "alt=" Wkiom1bydzbbaoiqaaed8vrbkp8207.png "/>

Third, animation properties

Animation Sub-Properties

-Animation-name: Call animation that specifies the name of the keyframe that needs to be bound to the selector

-Animation-duration: The time it takes for the animation to complete a cycle

-value is numeric, in seconds or milliseconds

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

-Take values as predefined functions, such as ease, linear, ease-in, Ease-out, Ease-in-out

-You can also take a value as a Bezier curve

-Animation-delay: Delay time before playback

-value is numeric, in seconds or milliseconds

-Animation-interation-count: Number of plays

-values are numeric or infinite

-Infinite, indicating unlimited playback

-Animation-direction: Animation playback Direction

-value is normal or alternate

-Normal is the default value, which means playing normally

-alternate means that the animation plays in the odd number of times (1, 3, 5, and so on) and plays backwards in an even number of times (2, 4, 6, and so on)

Animation property

-animation property for controlling animations

-Call the animation defined by @keyframes

-Set animation properties such as time, number of times, etc.

-The animation property is a shorthand property that defines aspects of the animation

-The syntax is:

-Animation:name Duration timing-function delay iteration-count direction;

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7D/E7/wKioL1byenPRyPk6AAE-53eb6yU829.png "title=" Web.png "alt=" Wkiol1byenprypk6aae-53eb6yu829.png "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7D/E7/wKioL1byeonCDkcCAADoKA0Khi4761.png "title=" Web.png "alt=" Wkiol1byeoncdkccaadoka0khi4761.png "/>

Animation-fill-mode Property

-Specifies whether animations are visible before or after the animation is played

-Desirable values

-None: Do not change the default behavior

-Forwards: When the animation is complete, keep the last property value (defined in the last Keyframe)

-Backwards: Apply the Start property value (defined in the first keyframe) before the animation is displayed

-both: both forward and backward fill modes are applied

Animation-play-state Property

-Specify whether the animation is running or paused

-often used in conjunction with JavaScript code, for pausing animations during playback

-Desirable values

-Paused: Animation paused

-Running: Animation playback

Animations and Transitions

-Transitions are used to make simple animation effects

-Animations can make more complex animations, control more precisely

Summary: This chapter focuses on CSS animations (overview, keyframes, animation properties)

This article from the "Technical Exchange" blog, declined reprint!

CSS3 Advanced -7 CSS Animations (overview, keyframes, animation properties)