Chat CSS3 Animation

With the CSS3 more and more hot, CSS3 animation has gradually been the attention of everyone. This time I was fortunate to modify the whole site of Taobao page head, a small application (see http://www.taobao.com/arrow at the hover effect). It is better to satisfy the little vanity of the technical man than the gradual enhancement.

The following is a little understanding of yourself, I hope to be helpful to everyone.

...

Taobao Case Analysis

Requirements: Rotate the arrows when you move the mouse over the menu, and animate the browsers that support CSS3.

SOURCE Please view the demo source file.

Demo (http://fiddle.jshell.net/pjRVT/show/light/)

...

about CSS3 Animations

From (Http://www.w3.org/Style/CSS/current-work) can be seen, CSS animation involves the knowledge points include CSS 2D transformations, CSS 3D transformations, CSS Transitions, CSS animations.

Transformation adds a number of properties, such as rotate, scale, and skew, that can be used to implement animations, such as width, height, left, and top.
Transition and Animation are used to define the process of animation. The transition can achieve simple animation, and animation can achieve relatively complex animations by setting multiple keyframes.

...

Can I use? Compatibility

(Data from http://caniuse.com/)

	IE	Firefox	Safari	Chrome	Opera
CSS 2D Transform	No	3.5	3.2	2.0	10.5
CSS 3D Transform	No	No	4.* (MAC)	No	No
CSS Transition	No	3.7	3.2	2.0	10.5
CSS Animation	No	No	4.0	2.0	No

As you can see, CSS animation is currently supported only by WebKit kernel browsers, and transition is more appropriate for incremental enhancements.

...

a simple example

Requirements: Allow a DIV element to be 1 time times larger when the mouse moves, rotate 180 degrees, and the background from red to blue.

HTML code::

<div></div>

CSS code::

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: red;

    /* 定义动画的过程 */
    -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
    -moz-transition:    -moz-transform .5s ease-in, background .5s ease-in;
    -o-transition:      -o-transform .5s ease-in, background .5s ease-in;
    transition:         transform .5s ease-in, background .5s ease-in;
}

div:hover {
    /*  定义动画的状态 */
    -webkit-transform: rotate(180deg) scale(2);
    -moz-transform: rotate(180deg) scale(2);
    -o-transform: rotate(180deg) scale(2);
    -transform: rotate(180deg) scale(2);
    background: blue;
}

Demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)

...

the helpless browser prefix

This is a very painful problem because you have to copy the code over and over again for each browser.

It is worth noting that the standard code for the prefix should be placed at the end. If a property becomes standard after a few years and is supported by default by the browser, this line of code overrides the previous definition, allowing the browser to use it preferentially.

...

A slightly more complex example (CSS3 animation)

Requirements: Make a DIV element 1 time times larger after clicking, rotate 180 degrees, and the background from red to blue; then move to the right 400px.

SOURCE Please view the demo source file.

Demo (http://fiddle.jshell.net/a4r94/show/light/) (Safari, Chrome only)

...

Amazing! CSS 3D Transformations

See Live Demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari only, similar to http:// www.cooliris.com/effect), no Mac can go to (http:http://www.satine.org/archives/2009/07/11/snow-stack-is-here/) watch video demo.

Ps:mac Safari 3D Transform, 2D Transform and opacity visual effects are running on the GPU, for this I also specifically verified the win Safari, really do not support.

...

Related Information

WebKit Blog Introduction animation/2d transforms/3d transforms three article
http://webkit.org/blog/138/css-animation/
http://webkit.org/blog/130/css-transforms/
http://webkit.org/blog/386/3d-transforms/

W3 Organization's CSS specification set
Http://www.w3.org/Style/CSS/current-work

Apple's Official document on CSS visual effects
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/ Introduction/introduction.html

CSS animation compatibility data source
http://caniuse.com/

Application of 3d Transform app
Http://www.satine.org/research/webkit/snowleopard/snowstack.html
Http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
http://www.fofronline.com/experiments/cube-3d/

The application of CSS3 animation
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
Http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html
Http://www.optimum7.com/css3-man/animation.html
Http://hedgerwow.appspot.com/demo/flippage
http://neography.com/journal/our-solar-system-in-css3/
http://css-tricks.com/examples/StarryNightCSS3/
Http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html

The application of CSS3 Animation: The realization of the clock
Http://g-zone.org/test/g-clock/index.html

...

Finish