CSS3 Animation Basics

The text is reproduced, the original address:http://tech.163.com/mobile/10/0106/09/5sb96qsm00112k88.html  translation: You need to know the CSS3 animation technology Original: What do you need To Know about behavioral CSS for Web-native CSS 3 properties such as Border-radius, Box-shadow and Text-shadow in WebKit (Safari, chrome, etc.) and gecko ( Firefox) and other advanced browsers are beginning to show a growing momentum in usage. 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 CSS 3 can do for us. In this article, we'll go farther and look at more advanced CSS3 techniques such as morphing (transformation), Transformation (transition), and animation (animation). We will cover the code itself, browser support, and some examples of how these new attributes can be correctly demonstrated to enhance your design and enhance the overall user experience. CSS Morphing (transformation) CSS transformation is a draft of the consortium. But when I first sat down to read all of its features to learn something, it did not make me feel enlightened. As you can imagine, this document is written in technical terms, and it focuses more on distorted graphics (such as drawing) elements and matrices. I haven't touched the matrix since I studied calculus in my freshman years, I have to do a lot of good old browser testing and guessing and testing for this section. After reading every tutorial I can find and a lot of browser testing, I've summed up some useful information about CSS morphing that everyone can benefit from. The Transformtransform property implements some of the same functionality that can be implemented with SVG. It can be used for inline (inline) and block-level (block) elements. It allows us to rotate, scale, and move elements--just one line of CSS code. The biggest criticism of some avant-garde design is that the text is not selectable (it must be done using the Transduction method). When you use the Transform property to control text, this is no longer a problem, because this is a pure CSS method, so the text inside the element remains optional. This is a great advantage of CSS relative to using a picture (or background image).　　　　Some interesting and useful morphing features: rotate rotate (rotation) allows you to rotate an object by passing a degree value. Scale scales is a zoom function that allows any element to changeEven larger.　　　　It uses positive and negative numbers as well as decimals as parameters. Translate translate is to reposition the element based on the x and Y coordinates skew as the name implies, skew is to tilt the object, the parameter is the degree matrix Transform support matrix transformation, is based on the x and Y coordinates reposition element below let We have a deeper understanding of each feature. Please click on "Next page" to read more content. The RotateTransform attribute has many uses, one of which is translate (rotation). Translate is an angle-based rotation of an object and can be used inline and block-level elements, which can achieve cool results. #nav {-webkit-transform:rotate ( -90deg);-moz-transform:rotate ( -90deg); filter:progid:d XImageTransform.Microsoft.BasicImage (rotation=3);} Please note that in IE8 (non-standard mode) it requires you to write "-ms-filter" instead of "filter". Browser support for translate is surprisingly broad. In the above CSS fragment, we directly add the-webkit-and-moz-prefixes and then rotate the #nav element-90 degrees. Pretty simple, huh? The only problem is that for a rather important design element, if IE doesn't support it, many designers will be reluctant to use it. Fortunately, IE has this filter: Graphics rotation filter. It can have 4 rotation values: 0, 1, 2, and 3. You will not get the same precision control as WebKit and gecko, but at least to some extent remain uniform (even IE6). Although this filter only supports 4 values, it seems a little chicken, but for IE, better than nothing bar. Please click on "Next page" to read more content. Scalescale doesn't work like you think: simply zoom in and out of an element. The zoom function uses a width and height of two values, which can be positive, negative, and fractional. A positive value amplifies an element, as you expect, based on the specified width and height. A negative value does not shrink the element, but instead flips it (for example, the text is reversed) and then scales it accordingly. However, you can use decimals smaller than 1 (for example,. 5) to shrink or shrink an element. #nav { -webkit-transform:scale (2);-moz-transform:scale (2);} #nav { -webkit-transform:scale (2, 1);-moz-tRansform:scale (2, 1);} #nav { -webkit-transform:scale ( -2, 1);-moz-transform:scale (-2, 1);} Browser support Scale property currently only available in Firefox, Safari and chrome support, so far no version of IE support. Scaling an object is a pretty meaningful design choice. It can be used with progressive enhancement: hover, which adds a little bit of fun to your navigation. #nav Li A:hover{ -webkit-transform:scale (1.1);-moz-transform:scale (1.1);} Please click on "Next page" to read more content. Translate the name "translate (conversion)" is a bit easy to misunderstand. It is actually a method of locating elements using x and Y coordinate values. #nav { -moz-transform:translate (10px, 20px);-webkit-transform:translate (10px, 20px);} Browser support translate properties are currently supported only by Firefox, Safari and Chrome, and also use the browser's private prefix-moz-and-webkit-. Please click on "Next page" to read more content. Skewskew 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 only rotates, and does not change the shape of the element. Skew will make the shape of an element change. The skew has two parameters that represent the degree of tilt of the x and Y axes, respectively. #nav { -moz-transform:skew (30deg, -10deg);-webkit-transform:skew (30deg, -10deg);} Browser support skew properties are currently supported only by Firefox, Safari and Chrome, and also use the browser's private prefix-moz-and-webkit-. Please click on "Next page" to read more content. Matrix is the matrix, matrix is a very basic thing in advanced mathematics, and in CSS 3 is indeed a fairly advanced function, CSS 3 introduced matrix function, can be very flexible to achieve the various effects. It has 6 parameters (A,B,C,D,E,F), which is actually a 3*3 matrix that passes the old parameters to the new values after the matrix: | A B E | | C D F | | 0 0 1 | If you're interested in in-depth research, you can look at this http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined, which is a document of SVG, But the principle of matrix transformation is universal. Let's look at an example: #nav { -moz-transform:matrix (1, -0.2, 0, 1, 0, 0);-webkit-transform:matrix (1,-0.2, 0, 1, 0, 0);} Browser support Fortunately, IE supports the matrix filter, although it does not support the majority of CSS3 deformation features, but the use of its filter, the basic can also achieve the same effect, but you have to understand the matrix operation. This feature is supported by WebKit and Firefox (3.5+). Please click on "Next page" to read more content. Chain deformations are often separate, but if you want to use multiple variants at the same time, the code can be quickly integrated, especially with private extensions. Fortunately, we have some built-in abbreviations: #nav { -moz-transform:translate);   -webkit-transform:translate (10, 25);   -moz-transform:rotate (90deg);   -webkit-transform:rotate (90deg);   - Moz-transform:scale (2, 1);   -webkit-transform:scale (2, 1);  } These transformations can be chained together to make your code more efficient: nav{ - Moz-transform:translate (rotate) (90deg) scale (2, 1);  -webkit-transform:translate (+) 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 more extensive, we can create richer and lighter interfaces and applications. Transform-oRigintransform-origin is not a sub-function of transform, but it is closely related 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 results of rotate deformation may be very different. Transform-origin accepts two parameters, which can be a specific value, such as a percentage, em,px, or a descriptive parameter such as Left,center,right, or Top,middle,bottom. A few examples:. class1{-moz-transform-origin:0 0;-webkit-transform-origin:0 0;...}. class2{-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;..}. Class3{-moz-transform-origin:top Left;-webkit-transform-origin:top left, ...} Browser compatibility This property is currently supported only by WebKit and Firefox, and it is necessary to add their own private prefixes. Transition (conversion) a basic transformation involving CSS properties 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 in conjunction with transformations (as well as by raising such as: hover or: Focus events) to create some animations. Fade out the background color, slide an element and let an object rotate can be done through CSS transformations.   #nav a{}  #nav a:hover, #nav a:focus{    -webkit-transition-property: background-color;   -webkit-transition-duration:2s;} Some parameters of the    conversion transition-property Specify the CSS property name for the transformation, for example, in the example above, the transformation is applied to the Background-color property. Transition-duration defines the time it takes for the conversion (from the old attribute to the new property) Transition-timing-function can be understood asExcessive effect. Specifies the intermediate values during the conversion. Can be specified with Cubic-bezier. Of course there are several common built-in values: Ease | Linear | ease-in | Ease-out | Ease-in-outtransition-delay this is easier to understand, is the time of the conversion delay. The time can be a positive integer, a negative integer and 0, nonzero when the unit must be set to be s (s) or MS (MS), when negative, the conversion action will start from that point in time, the previous action is truncated. The statement can be abbreviated as:-webkit-transition:background 1s linear 2s; Note: The parameters section is added for translation, not in the original text. Browser support is as cool as the Transform property, but currently only WebKit browser support. -moz-transition has been available in the latest nightly-build version of Firefox 3.7. You can also add-moz-transition to your CSS for 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 combine all of the elements we discussed above with animated properties such as Animation-duration, Animation-name, and animation-timing-function to create an effect like flash animations--pure CSS. #rotate { margin:0 Auto; width:600px; height:400px;   -webkit-transform-style: preserve-3d;  -webkit-animation-name:x-spin; -webkit-animation-duration:7s; - webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @- 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 is only visible in the nightly build version of Mac OS (Snow Leopard) WebKit. It looks just like the video above, if you are using Mac OS (Snow Leopard version), I think it is 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 the animation animation are somewhat like translate, so if you understand the parameters of the translate, it is not difficult to understand. The name of the Animation-name animation. Animation-duration defines the time it takes for an animation to play. The default is 0;animation-timing-function to define how the animation plays, The parameter setting is similar to transition-timing-functionanimation-delay defining the time the animation starts Animation-iteration-count defining the number of cycles, infinite is infinite. The default is 1. -webkit-animation-direction the direction of the animation playback, two values, the default is normal, this time the animation of each loop forward. Another value is alternate, which is played forward in an even number of times, and the odd number of times is played in the opposite direction. Browser support Unfortunately, currently, only a handful of browsers support CSS animations. The animations CSS can work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira, and other WebKit browsers. Safari 4 (Snow Leopard) supports 3D animations. Summary now, JavaScript can make up for this gap before CSS 3 is perfected. Unfortunately, it may take a long process for all browsers to support these great properties. Instead of waiting for that day to come, we can use some rigorous incremental enhancements as well as JavaScript to enhance our websites and apps. It's not a bad thing, at least it looks right now. Looking at the latest IE9 announcements, if the IE team adds some of these properties to this new version of the browser I won't be surprised that they've started thinking about integrating CSS3 (Border-radius). The future of the web is bright, especially because of the highly experimental nature of these animations. Although many properties are not available for customer or advanced product work, at least they are fun! We all look forward to the day when we can support all platforms to build some really great lightweight applications. About the original author Tim Wright is a web designer/development engineer and blogger. He has been a Web standard and user advocate since 2004. You can find more articles he wrote on csskarma.com, or  follow Tim on Twitter.  zt from hp:http://blog.sina.com.cn/s/blog_74d6cedd0100q0yd.html 

CSS3 Animation Basics