Path to css3 practice (6): Transition of css3 and animation)

At the beginning, W3C CSS workgroup refused to add css3 transition and animation to the official standard. Some members thought that the transition effect and animation are not style attributes and can be implemented using scripts. Therefore, please understand that, especially Web Front-end developers, using css3 for transition effects and animations is not better than using JS scripts (I think: CSS allows developers (designers) who do not understand JavaScript to do animations, and uses a browser encapsulated method. However, JS scripts can be more flexible and can be optimized in performance ).

1. Transition

Transition is an intuitive effect that allows an attribute of a DOM element to change from an old value to a new value within a fixed period of time. Currently, Firefox, opera, Safari, and chrome support transition, while IE does not.

Syntax: Transition:Property duration timing-function Delay;

Note:

Value	Description
Transition-Property	Specifies the name of the CSS attribute to be changed
Transition-Duration	Specifies how much time the transition takes (S/MS)
Transition-timing-Function	Specify the speed of transition
Transition-Delay	Defines the delay time of the transition effect.

Instance:

<Style type = "text/CSS"> Div {width: 100px; Height: 100px; Background: red; transition: width 2 S;-moz-transition: width 2 S; /* Firefox 4 */-WebKit-transition: width 2 S;/* safari and chrome */-o-transition: width 2 S;/* opera */} Div: hover {width: 300px ;}</style> <div> </div>
 

2. Animation

In short, CSS animation (animations) is to secretly change one or more of its CSS values within a certain frequency within a fixed animation time, so as to achieve visual conversion animation effect. Animation can be controlled in many aspects, including the animation running time, start value and end value, as well as the animation pause and delay start time.

Currently, browsers that support animation include Firefox, Safari, chrome, ie, and opera. The following is a simple example:

<Style type = "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;

Note:

value	description
animation-name	specifies the animation frame name
animation-duration	specifies the animation running time: seconds (s) and milliseconds (MS)
animation-timing-function	specify the animation speed
animation-delay	specify the animation delay time
animation-iteration-count	Number of animation repetitions
animation-direction	specifies whether the animation runs in the opposite direction

Next, we will share a demo on webkit.org. This demo uses transform and animation to add a small amount of JavaScript 3D animation effects. If you are interested, you can refer to the following url: http://www.webkit.org/blog-files/3d-transforms/poster-cir. Unfortunately, only the WebKit kernel browser can see the relevant 3D animation effect.