CSS3 Practice Road (VI): Transition effect of CSS3 (transition) and animation (animation)

At first, CSS Workgroup refused to add CSS3 transition and animation to the official standard, and some members thought that transition effects and animations were not style attributes and could already be implemented with scripting. So please understand, especially the Web front-end developers, with CSS3 to do some transition effect and animation, not better than the use of JS script implementation (personally think: with CSS just let not understand JS staff (designers) can also do animation, and use the browser package good method, but the use of JS script can be more flexible, can also be optimized for performance).

1.Transition

Transition is an intuitive effect that allows a property of a DOM element to be from an old value to a new value within a fixed time. Currently Firefox, Opera, Safari and chrome support transition, IE is not supported.

Syntax: Transition: Property duration timing-function delay;

Description

Value	Description
Transition-property	Specifies the name of the CSS property to change
Transition-duration	How long does it take to specify the transition effect (S/MS)
Transition-timing-function	Specify the speed of the transition effect
Transition-delay	Defines the delay time for the transition effect.

Instance:

<styletype="text/css"> div{width:100px;height:100px;background:red;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}</style><div></div>

2. Animation

CSS Animation (animations) simply means that in a fixed period of time in the animation to change its CSS or some value within a certain frequency, so as to achieve visual conversion animation effect. Many aspects of animations can be controlled, including animation run time, start and end values, animation pauses and delays in its start time, and so on.

Currently supported animation browsers are: Firefox, Safari and Chrome,ie and opera are not supported. Let's look at a simple example:

<styletype="text/css"> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /*Firefox*/-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{from {left:0px;}to {left:200px;}}@-moz-keyframes mymove /*Firefox*/{from {left:0px;}to {left:200px;}}

@-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:200px;}}</style><div></div>

Syntax: Animation: name duration timing-function delay Iteration-count direction;

Description

value	Description
animation-name	Specify the name of the animation frame
Animation-duration	Specifies when the animation runs: seconds (s) and milliseconds (ms)
animation-timing-function	Specifies the speed at which the animation runs
animation-delay	Specify delay time for animation
animation-iteration-count	Specify the number of repetitions of the animation
animation-direction	Specifies whether the animation runs in the opposite direction

Next to share with you a webkit.org above a demo, this demo use transform and animation, add a small amount of JavaScript 3D animation effect, interested students can refer to the following URL:/http Www.webkit.org/blog-files/3d-transforms/poster-circle.html. Unfortunately only the WebKit kernel browser can see the relevant 3D animation effect.

CSS3 Practice Road (VI): Transition effect of CSS3 (transition) and animation (animation)