Still use JS to write animation? Then you Otter ~ ~ Pure CSS implementation of the elements of rotation and zoom

This article is only available for Chrome, Opera, Safari.
Original and Demo:
Effect: Move the mouse to an element, the element within 2 seconds, rotate 720 degrees, and 1.5 times the original size to enlarge

To achieve this effect requires only very simple 3 steps, first is to create the elements you need to rotate.

<div>CSS 3</div>

Next we need to tell the browser to just add the element of a property need to use it to perform some kind of animation, set the execution time animation and motion functions. Here will use the new CSS 3 properties: transition. Do not worry about the following code will make you confused, there followed a detailed explanation of the transition property.

    width: 100px;
    height: 100px;
    background: purple;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;

width, height, background without any further description of the, transition of all the prefix is compatible with different browsers to private property that I believe a little knowledge of CSS 3 people should know. It is worth noting here, so far, Firefox's latest version (3.6) still does not provide transition support, but Mozilla claims that would In Gecko 1.9.3 (firefox 4) in Yinru this attribute, So for code of continuity, we still add the-moz private property.

The above transition is a shorthand, the first attribute value is actually all the properties of transition-property value, he said to tell you about the browser which you will operate the animation properties. Such as transition-property: left, transition-property: opacity, width, the former said to be left on the property to the implementation of animation, which indicated that they would also opacity and width attributes on the implementation of animation, yes, the comma between multiple attributes separated . The set of all here is that an attribute may be any operation it is a lazy way.

The second attribute value 2s very simple, it is said that the implementation time animation, that the properties of elements change from the old to the new property the number of seconds consumed. If the value of 0 indicates an end immediately in the implementation of animation. The property value of units can be s (seconds), it can ms (milliseconds). Of course, the above code as a shorthand for its use, complete, written with the transition-duration: 2s; default value is 0.

The third attribute value ease-in-out, simply to Understanding in animation Zhi Xing Zhong Shiyong "ease-in-out" this effect, it actually Jiang Jueding element in the animation process in the Hezhong function to Jin Xing Yun Yong campaign calculation, which is often referred to as slow moving function. Generally have "ease | linear | ease-in | ease-out | ease-in-out" so some predetermined value. The default is "ease". The full wording of this property is transition-timing-function: ease-in-out;

In our demo, is to use these three attributes, in fact, transition has a property value: transition-delay, its property values with transition-duration exactly the same, only difference is that it that the animation delay time, this well understood, according to the specified time delay the implementation of animation.

In the final step before, it is necessary to reiterate that, transition property only for the above-mentioned properties of four transition-X short, short of its rules: [<'transition-property'> | | <'transition -duration '> | | <' transition-timing-function '> | | <' transition-delay '>]. Do not confuse this practice. Also, if you want to know more about the content of transition W3C provides a very detailed document.

As you can see in the demo, as the last step we need to add hover style to the elements. Transform property is used here.

#css_animation:hover {
    -webkit-transform: rotate(720deg) scale(1.5);
    -moz-transform: rotate(720deg) scale(1.5);
    -o-transform: rotate(720deg) scale(1.5);
    transform: rotate(720deg) scale(1.5);

Compared to transition property, transform to a number of easy to understand, he said deformation of the elements. rotate (720deg) on the elements that rotate 720 degrees deformation, the number in parentheses is the angle of rotation value, unit deg, scale is an element zoom function, the parameters in parentheses expressed in multiples of scale, no unit. In fact transform much stronger than mentioned here, can achieve a variety of deformation, the W3C's document has a very detailed description.

So far, you should have achieved the results as the above demo. In fact, the whole process can be temporarily this way: through the transition, we conducted a mouseover event listener element, and recorded its first all (all) property value, when the elements of the mouseover event is triggered when the element's target attribute to find value, then the implementation of animation. Is that simple. Also worth mentioning is that when the element is in animation state, if the element contains text, the text is still optional at this time, it is SVG and Canvas are unable to achieve results.
I really hope that as the foreign site, as local differentiation through the development of gradual transition to css3, also allows users to transition to firefox, chrome, and other advanced browser.

分类:Web 时间:2010-06-24 人气:210
blog comments powered by Disqus


  • Ant tool in common core tasks. 2010-07-07

    Ant tool in the package of each task to perform specific functions, is the Ant tool basic unit of execution. Ant tool to provide many useful tasks, project developers may use the built-in Ant task tool provides convenient features such as automatic b

  • JSP2 custom label (simple, with property, with the tag body) 2010-10-31

    References in the JSP 1.1 specification added a custom tag library specification, custom tag library is a very good presentation layer component technology. By using a custom tag library, you can encapsulate in a simple label complex functions. ....

  • javascript object (change) 2010-06-10

    / ** * 1. Objects * Object is a complex data type, they will be multiple data values in one unit, and run using the name to access these values. Another way to explain the object, the object is an unordered collection of properties, each property has

  • struts tag styleId property 2010-10-27

    Among the projects in order to meet the Firefox browser. Select a date when the need to add a control ID, because only in firefor recognized ID, must be obtained through the ID to an object which can be added to the selected time to the input box. Pr

  • Modify the control with js no id attribute table and the div's border properties, thickness 2010-09-16

    Reprinted from: Keywords: js javascript change control id attribute table div border thickness Js code var table = document.getElementsByTagName ("table"); / / Find all the table tag page for (var i = 0;

  • FusionCharts of XML tag attribute 2010-06-11

    <Chart caption = 'around the city comparison chart' xAxisName =''yAxisName =''outCnvBaseFontColor = '# 000000' showValues = '0 'decimals = '3' formatNumberScale = '0 'baseFontSize = '13' bgAlpha = '40 'bgColor = '# F3EED1' legendPadding = '0 'slantLa

  • DIV + CSS browser compatibility solution 2010-08-10

    DIV + CSS page layout This is a trend, and I began to follow this trend, but still in use DIV + CSS website design, it should pay attention to css style compatible with different browsers, in particular, is full use of DIV + CSS design web pages, on

  • EXT core API Xiangjie 2010-08-12

    EXT core API Xiangjie 1, Ext Class ... ... ... ... ... ... ... ... ... ... ... ... ... 2 2, Array class ... ... ... ... ... ... ... ... ... ... ... 4 3, Number class ... ... ... ... ... ... ... ... ... ... ... 4 4, String class ... ... ... ... ... ..

  • JQuery selector of the Sizzle 2010-09-07

    This is an introduction jQuery Sizzle selector on the article, jointly completed by me and obility. In this paper, we try to use their language appropriately to the code to show readers Sizzle in treatment options for Liu Cheng CAE principle and end

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.040 (s). 13 q(s)