The application of animation technology in CSS3

With the development of the network, the browser has a stronger ability to render more advanced code, we are gradually achieving the goal across all platforms and browsers. Not only can we spend less time making sure our box model looks normal in the IE6, but it also creates an atmosphere that encourages innovation, avoids hack, and redirects scripts.

The network is a very good environment, but also a rich knowledge to share the collaborative community. We want to have rounded corners, we do it, we want a background picture, we get it, we want a border picture, and we let it happen. So the requirement is never a problem, otherwise we may still be using table to lay out the page and use too much code. We all know that the Internet is omnipotent.

Live for the web

CSS 3 properties such as Border-radius, Box-shadow, and Text-shadow begin to grow in the use of advanced browsers such as WebKit (Safari, chrome, etc.) and Gecko (Firefox). They (these CSS properties) have created lighter pages and richer experiences for users, and they can be gracefully degraded. However, these are just a few of the many things that CSS 3 can do for us.

In this article, we will go further and look at more advanced CSS3 techniques such as deformation (transformation), Transformations (transition) and animations (animation) . We'll cover the code itself, browser support, and examples of how these new attributes can be used to improve your design and enhance your overall user experience.

CSS variants (transformation)

CSS transformation is a draft of the consortium. But when I first sat down to read all of its features in order to learn something, it didn't make me feel enlightened. As you can imagine, this document is written in technical terms, and it focuses more on deformed graphics (such as drawing) elements and matrices. I have not touched the matrix after learning calculus freshman, I have to do a lot of good old browser test and guess and test for this chapter.

After reading every tutorial I could find and a lot of browser tests, I summed up some useful information about CSS transformations that everyone could benefit from.

Transform

The Transform property implements some of the same functionality that can be implemented with SVG. It can be used for inline (inline) elements and block-level elements. It allows us to rotate, scale, and move elements--just one line of CSS code.

The biggest criticism of some avantgarde design is that the text is not optional (must be implemented using the Chettu method). This is no longer a problem when you are adept at using the transform attribute to control text, because this is a pure CSS method, so the text within the element remains optional. This is a great advantage for CSS relative to using a picture (or background picture).

Some interesting and useful deformation features:

• Rotate
  Rotate (rotation) allows you to rotate an object by passing a number of degrees.
• Scale
  Scale is a scaling feature that allows any element to become larger. It uses positive and negative numbers as well as decimals as arguments.
• Translate
  Translate is the relocation element based on the x and Y coordinates.
• Skew
  As the name suggests, the skew is to tilt the object, the argument is the degree
• Matrix
  Transform support matrix transformation, which is to reposition elements based on X and y coordinates

Let's take a closer look at each function.

Rotate

The Transform property has many uses, one of which is the translate (rotation). Translate is based on the angle of the rotation of an object and can be used for inline elements and block-level elements, it can achieve a very cool effect.

#nav {
-webkit-transform:rotate ( -90deg);
-moz-transform:rotate ( -90deg);
-o-transform:rotate ( -90deg);
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);
}

Note that in IE8 (nonstandard mode) it requires you to write "-ms-filter" instead of "filter".

Browser support

The browser's support for translate is surprisingly broad. In the CSS fragment above, we directly add the-webkit-and-moz-prefixes and then rotate the #nav elements-90 degrees.

Pretty simple, huh? The only problem is that for a fairly important design element, if IE doesn't support it, many designers will be reluctant to use it.

Fortunately,IE has this aspect of the filter : Graphics rotation filter. It can have 4 rotational values: 0, 1, 2, and 3. You will not gain the same precise control as WebKit and gecko, but at least to a certain degree remain unified (or even IE6). Although this filter only supports 4 values, it appears to be a bit of a chicken, but for IE, it is nothing.

Also, it is worth mentioning that opera published the opera 10.50 pre version a few days ago, claiming to support CSS3 's transition and transform. You just need to use the private property, which is to use the prefix-o-

Scale

Scale does not work as you would imagine: simply narrowing and amplifying an element. The zoom function also takes a width and a height of two values, which can be positive, negative, and decimal.

A positive value magnifies an element, as you would expect, based on the specified width and height.

A negative value does not shrink the element, but rather flips it (for example, the text is reversed) and scales it accordingly. However, you can shrink or shrink an element by using a decimal number less than 1 (for example,. 5).

The width and height of the #nav {/* NAV element will be magnified double 
/-webkit-transform:scale (2);
-moz-transform:scale (2);
-o-transform:scale (2);
the width of the #nav {/* NAV element is doubled and the height remains constant * *
-webkit-transform:scale (2, 1);
-moz-transform:scale (2, 1);
-o-transform:scale (2, 1); 
} 
The width of the #nav {/* Nav will be doubled and flipped horizontally, but the height remains constant * *
-webkit-transform:scale ( -2, 1);
-moz-transform:scale ( -2, 1);
-o-transform:scale ( -2, 1);
}

Browser support

The scale property is currently supported only by Firefox, Safari/chrome and opera 10.50 , and so far does not have an IE version to support it. Scaling an object is a very meaningful design choice. It can be used by progressive enhancement: hover, which adds a little spice to your navigation.

#nav Li a:hover{/* This allows your navigation links to be slightly magnified when you pass the mouse
/-webkit-transform:scale (1.1);
-moz-transform:scale (1.1); 
-o-transform:scale (1.1);
}

Translate

The name "Translate" is a bit misleading. It is in fact a method of locating elements using x and Y coordinate values .

#nav {/* This will move the nav element to the left 10 pixels and move down 20 pixels
/-moz-transform:translate (10px, 20px);
-webkit-transform:translate (10px, 20px);
-o-transform:translate (10px, 20px);

Browser support

The translate properties are currently supported only by Firefox, Safari/chrome, and Oprea 10.5 , but also by using the browser's private prefix-moz-and-webkit-.

Skew

Skew is also a useful transform feature that can tilt an object around the X and Y axes at a certain angle. This is not the same as the rotation of the rotate, rotate is just rotating, not the shape of the element changed. Skew will make the shape of an element change. The skew has two parameters, representing the degree of inclination of the x and Y axes respectively.

#nav {
/* This will move the nav element to the left 10 pixels and move down 20 pixels
/-moz-transform:skew (30deg, -10deg); 
-webkit-transform:skew (30deg, -10deg); 
-o-transform:skew (30deg, -10deg); 

Browser support

The skew properties are currently supported only by Firefox, Safari/chrome, and Oprea 10.5 , but also by using the browser's private prefix-moz-and-webkit-.

Matrix

Yes, the matrix is matrices, the matrix is a very basic thing in advanced mathematics, and in CSS 3 is indeed a fairly advanced function, CSS 3 introduces the matrix function, can be very flexible to achieve the various effects. It has 6 parameters (A,B,C,D,E,F), which is in fact a 3*3 matrix that converts the old arguments to the new values through the matrix:
A b E
C D F
0 0 1
If you are interested in further research, you can look at this http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined, this is a SVG document, but the principle of matrix transformation is universal.

Let's take a look at an example:

#nav {/* NAV elements will be tilted like the upper right corner 
/-moz-transform:matrix (1, -0.2, 0, 1, 0, 0);
-webkit-transform:matrix (1, -0.2, 0, 1, 0, 0);
-o-transform:matrix (1, -0.2, 0, 1, 0, 0);
}

Browser support

Fortunately, IE supports the matrix filter, although it does not support most CSS3 deformation features, but the use of its filter, the basic can achieve the same effect, but you have to understand the matrix operation. WebKit and Firefox (3.5+), Opera 10.5 all support this feature.

Chain type deformation

Deformations are often separate, but if you want to use multiple variants at the same time, the code can be quickly consolidated, especially with private extensions. Luckily, we have some built-in abbreviations:

#nav {-moz-transform:translate);
-webkit-transform:translate (a);
-o-transform:translate (a);
-moz-transform:rotate (90deg);
-webkit-transform:rotate (90deg);
-o-transform:rotate (90deg); 
-moz-transform:scale (2, 1); 
-webkit-transform:scale (2, 1);
-o-transform:scale (2, 1);
}

These variants can be chained together to make your code more efficient:

#nav {
-moz-transform:translate) rotate (90deg) scale (2, 1);
-webkit-transform:translate (a) rotate (90deg) scale (2, 1);
-o-transform:translate (a) rotate (90deg) scale (2, 1);
}

The real power of these attributes is to merge together. You can move, rotate, scale, and control any inline elements and block-level elements without using JavaScript. Once the support for these attributes becomes wider, we can create richer and lighter interfaces and applications.

Transform-origin

Transform-origin is not a child function of transform, but it is very close to transform. It can be used to specify the starting point of the transform, for example, the default starting point for rotate deformation is between them, you can set the starting point in the upper left corner, or the lower left corner, so that the rotate deformation results can be very different.

Transform-origin accept two parameters, they can be percentages, em,px, and other specific values, can also be left,center,right, or top,middle,bottom and other descriptive parameters. Several examples:

. class1{-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
-o-transform-origin:0 0;  ...  }
. class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-o-transform-origin:100% 100%;  ...} 
. Class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
-o-transform-origin:top left;
 ...}

Browser compatibility

This property is currently supported only by WebKit, Firefox, and Opera 10.5, and it needs to add its own private prefix.

Transition (conversion)

A basic transformation involving CSS attributes is to define and move an element from its stationary state (for example, a dark blue background) to its hover or activation state (for example, a light blue background).

Transformations can be used at the same time as variants (and to raise things such as: hover or: Focus events) to create some animations. Fade the background color, slide an element and allow an object to rotate through CSS transformations.

#nav a{background-color:red;} 
#nav a:hover, #nav a:focus{
background-color:blue;
/* Tell the transformation to apply to the Background-color attribute (looks like a CSS parameter, isn't it?)
#foreshadowing) * 
/-webkit-transition-property:background-color;
-o-transition-property:background-color; 
/* Let it last two seconds * * *
-webkit-transition-duration:2s;
-o-transition-duration:2s;  }

Some of the parameters of the transformation

• Transition-property

  Specifies the name of the CSS property for the transformation, for example, in the example above, where the transformation is applied to the Background-color property.

• Transition-duration

  Define the time that the conversion took (the time it took to change from the old property to the new property)

• Transition-timing-function

  Can be understood as excessive effects. Specifies the intermediate value during the conversion process. Can be specified with Cubic-bezier. Of course there are several commonly used built-in values: Ease linear ease-in Ease-out ease-in-out

• Transition-delay

  This is relatively easy to understand, that is, the time of conversion delay. Time can be positive integer, negative integer and 0, Non-zero when the unit must be set is s (seconds) or MS (MS), when negative, the conversion of the action will start from that point of view, the previous action was truncated.

Note: The parameter part is the front end observation translation to add, the original text does not.

Browser support

As cool as the Transform property, but currently only WebKit browser support. The Opera 10.5 Pre version can also be supported by adding a-o-prefix. -moz-transition has been available in the latest nightly-build version of Firefox 3.7. You can also add-moz-transition to your CSS to achieve future enhancements. You can even add a property without a private prefix, just in case.

Animation

Animation is the most useful place for CSS 3. You can integrate all of the elements we discussed above with animated properties such as Animation-duration, Animation-name, and animation-timing-function to create the same effects as flash animations--pure CSS.

#rotate {
margin:0 auto;
width:600px;
height:400px;/* ensure that we are in a one-dimensional space * *
-webkit-transform-style:preserve-3d; 
/* Let the entire line use x-axis rotation, 7-second animation, infinite playback and linear/
-webkit-animation-name:x-spin;
-webkit-animation-duration:7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;   } 
/* Define the animation to invoke  
/@-webkit-keyframes X-spin {0% {
-webkit-transform:rotatex (0deg); 
}
50% {-webkit-transform:rotatex (180deg);}
100% {-webkit-transform:rotatex (360deg);}   }

This fantastic CSS animation code and online demo can be seen on the WebKit website. The demo can be seen on any web site, but the animation effect can only be seen in the nightly build version of the Mac OS (Snow Leopard) WebKit. It looks just like the one in the video above, if you're using the Mac OS (Snow Leopard version), I think it's worthwhile to install a webkit to see for yourself (it's really cool). Windows system users are temporarily unable to appreciate this effect.

Some parameters of animation

Animation's parameters are somewhat like translate, so if you understand the parameters of translate, it's not hard to understand.

• Animation-name

  The name of the animation.

• Animation-duration

  Defines the time that animation takes to play. Default is 0;

• Animation-timing-function

  Define how the animation is played, and the parameter settings are similar to Transition-timing-function

• Animation-delay

  Define when the animation starts

• Animation-iteration-count

  Defines the number of times the loop is infinite, which is infinite. The default is 1.

• -webkit-animation-direction

  The animation is played in the direction of two values, the default is normal, this time the animation every cycle of the play forward. Another value is alternate, then the number of times forward, the odd number of times in the opposite direction play.

Browser support

Unfortunately, currently, only a few browsers support CSS animations. 2d CSS animations can work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira, and other WebKit browsers. Safari 4 (Snow Leopard) supports 3D animation

Summarize

Now, JavaScript can make up this gap before CSS 3 is perfected. Unfortunately, it may take a long time for all browsers to support these awesome properties. Instead of waiting for that day, we can use some rigorous incremental enhancements and JavaScript to enhance our web sites and apps. It's not a bad thing, at least now it seems.

Looking at the recent IE9 announcement, if the IE team added some of these attributes to this new version of the browser I wouldn't be surprised that they've started to think about integrating CSS3 (Border-radius).

The future of the web is bright, especially because of the highly experimental properties of these similar animations. Although many attributes are not available for customers or advanced product work, at least they are fun! We are all looking forward to one day that we can support all platforms to build some really great lightweight apps.