Use JavaScript to manipulate css3 attributes for animation

Css3 provides two ways to implement animation, transition and animation. Animation involves customizing a type of "@ keyframes". It is too complicated to use insertrule, so this article will skip it. Some of them are also considered as transform, but they are static and need to be combined with transition to become dynamic. Therefore, they are skipped.

Transition mainly includes the following four attributes, followed by their initial values.

• Transition-property: All;
• Transition-Duration: 0 s;
• Transition-timing-function: progress;
• Transition-delay: 0 s;

The value of transition-property can be none, all, or the specified attribute name.

CSS attributes that can be supplemented currently (less than those on MDC, removing many private attributes and rare attributes)

Attribute name	Type
Attribute name	Type
Background-color	Color
Background-Image	Gradients only; not implemented in Firefox
Background-Position	Percentage | length
Background-size	Percentage | length
Border-color (including sub-properties)	Color
Border-radius (including sub-properties)	Percentage | length
Border-width (including sub-properties)	Length
Border-spacing	Length
Bottom	Percentage | length
Box-shadow	Shadow
Color	Color
Clip	Rectangle
Font-size	Percentage | length
Font-weight	Number | keywords (excluding bolder, lighter)
Height	Percentage | length
Left	Percentage | length
Letter-spacing	Length
Line-height	Number | percentage | length
Margin (including sub-properties)	Length
Max-height	Percentage | length
Max-Width	Percentage | length
Min-height	Percentage | length
Min-Width	Percentage | length
Opacity	Number
Padding (including sub-properties)	Length
Right	Percentage | length
Text-indent	Percentage | length
Text-shadow	Shadow
Top	Percentage | length
-Moz-transform-Origin	Percentage | length, keywords
-Moz-Transform	Transform-Function
Vertical-align	Percentage | length, keywords
Width	Percentage | length
Word-spacing	Percentage | length
Z-Index	Integer

Transition-Duration: the animation duration. Its value is a value with a unit. The unit can be S and Ms.

Transition-delay: how long the animation delay starts.

Transition-timing-function: easing formula with the value of latency | linear | memory-In | memory-Out | memory-in-out | cubic-bezr ( , , , )

Bytes

This keyword sets the easing function Cubic-bezr (0.25, 0.1, 0.25, 1.0).

Linear

This keyword sets the easing function Cubic-bezr (0.0, 0.0, 1.0, 1.0).

Callback-in

This keyword sets the easing function Cubic-bezr (0.42, 0.0, 1.0, 1.0).

Timed-out

This keyword sets the easing function Cubic-bezr (0.0, 0.0, 0.58, 1.0).

Memory-in-out

This keyword sets the easing function Cubic-bezr (0.42, 0.0, 0.58, 1.0).

Cubic-bezeiser

Specifies a cubic bezr curve to use as the easing function. the four number values specify the P1 and P2 points of the curve as (x1, Y1, X2, Y2 ). all values must be in the range [0.0, 1.0] Random Sive.

Here are some examples of default timing-function:

Default» linear» memory-In» memory-out» memory-in-out» cubic-bezr»

However, when operating on them in JS, we only need transition. Because this is the first thing that browser vendors have developed, they all carry their prefixes, such as-MS-and-moz, we need to change them to the camper style before they can be called. See the example below.

Example 1: Use js to operate these css3 attributes to achieve the animation effect:

<Br/> <! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"> <br/> <title> Dom framework </ title> <br/> <SCRIPT> <br/> var dom = function (s) {<br/> return document. getelementbyid (s) <br/>}< br/> dom.css name = function (name) {<br/> var prefixes = ['', '-MS -', '-moz-', '-WebKit-', '-khtml-', '-o-'], <br/> RCAP =/-([A-Z]) /g, capfn = function ($0, $1) {<br/> return $1. touppercase (); <br/>}; <br/> dom.css name = function (name, target, test) {<br/> Target = target | document.doc umentelement. style; <br/> for (VAR I = 0, L = prefixes. length; I <L; I ++) {<br/> test = (prefixes [I] + name ). replace (RCAP, capfn); <br/> If (test in target) {<br/> return test; <br/>}< br/> return NULL; <br/>}< br/> return dom.css name (name ); <br/>}< br/> window. onload = function () {<br/> var El = dom ("test"), <br/> css3transition = dom.css name ("transition"); <br/> el. style [css3transition] = "All 5S transform-in" <br/> dom ("START "). onclick = function () {<br/> el. style. width = "400px "; <br/>}</P> <p> </SCRIPT> <br/> <style> <br/> # test {<br/> background: red; <br/> width: 10px; <br/> Height: 30px; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <p> css3 animation by situ zhengmei </p> <br/> <Div id = "test"> <br/> text <br/> </div> <br/> <button id = "start" type = "button"> Start test </button> <br/> </body> <br/> </ptml> </P> <p>

RunCode

Example 2: to operate the gradient of multiple attributes at the same time, we need to separate them with commas.

</P> <p> <! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"> <br/> <title> Dom framework </ title> </P> <p> <SCRIPT> <br/> var dom = function (s) {<br/> return document. getelementbyid (s) <br/>}< br/> dom.css name = function (name) {<br/> var prefixes = ['', '-MS -', '-moz-', '-WebKit-', '-khtml-', '-o-'], <br/> RCAP =/-([A-Z]) /g, capfn = function ($0, $1) {<br/> return $1. touppercase (); <br/>}; <br/> dom.css name = function (name, target, test) {<br/> Target = target | document.doc umentelement. style; <br/> for (VAR I = 0, L = prefixes. length; I <L; I ++) {<br/> test = (prefixes [I] + name ). replace (RCAP, capfn); <br/> If (test in target) {<br/> return test; <br/>}< br/> return NULL; <br/>}< br/> return dom.css name (name ); <br/>}< br/> window. onload = function () {<br/> var El = dom ("test"), <br/> css3transition = dom.css name ("transition"); <br/> el. style [css3transition] = "width 5S inline-in, height 4S linear" <br/> dom ("START "). onclick = function () {<br/> el. style. width = "400px"; <br/> el. style. height = "200px" <br/>}</P> <p> </SCRIPT> <br/> <style> <br/> # test {<br/> top: 1px; <br/> Background: red; <br/> width: 10px; <br/> Height: 30px; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <p> process attributes gradient by situ zhengmei </p> <br/> <Div id = "test"> <br/> text <br/> </div> <br/> <button ID = "start" type = "button"> Start test </button> <br/> </body> <br/> </ptml> <br/>

Run code

The cutting-edge browser also adds an event for this. When the gradient animation ends, let's clear the gradient attribute. However, this event name is very irregular. WebKit is webkittransitionend, opera is otransition, and FF is transitionend! They are different from the hump style starting with the upper case of the CSS attribute (such as webkittransition, otransition, and implicit transition)

 
VaR transitionend = (navigator. vendor & "webkittransitionend") | (window. opera & "otransitionend") | "transitionend"; El. addeventlistener (transitionend, function () {// ie10 PP3 will support transition and transform // http://blogs.msdn.com/ B /ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx this. style. removeproperty (css3transition. replace (rupper, "-$1 "). tolowercase (); // css3transition is webkittransition, etc.}, true)
 

Support:

• Firefox 4.0
• Google Chrome 4.0 +
• Safari 3.1 +
• Opera 10.5 +

Related Links

Http://www.the-art-of-web.com/css/css-animation/

Http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/

Http://www.opera.com/docs/specs/presto23/css/transitions/