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

sponsored links
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.
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

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

  • Hibernate primary key strategy-sequence

    Today, the use of hibernate in the company encountered a troublesome problem, the use of hibernate when the primary key generation strategy set sequence, but always reported in the implementation could not get next sequence value of the error, then o ...

  • hibernate call stored procedure

    hibernate call stored procedure

  • hibernate using c3p0 connection pooling

    Private c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters

    Hibernate in the configuration file: <properties> <property name="" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @

  • hibernate generic generic DAO

    package org.lzpeng.dao; import; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries