Translation: CSS3 animation technology you need to know
Translated from: What You Need To Know About Behavioral CSS
Please respect copyright and indicate the link to this site when reprinting!
Translation Preface: This article is translated from Smashingmagazine, but the content of the original text is a bit shallow and not very complete. Front-end Observation adds more and more systematic content on the premise of translation. If there are any shortcomings, please correct and add them.
As the web evolves and browsers become more capable of rendering more advanced code, we are on track to achieve our goal of spanning all platforms and browsers. Not only can we spend less time making sure our box model looks normal in IE6, but it also creates an atmosphere that encourages innovation, avoids hacks, and emphasizes front-end scripts.
The Internet is a great environment and a collaborative community with a wealth of knowledge to share. We wanted rounded corners , and we made it happen; we wanted multiple background images , and we made it happen; we wanted border images , and we made it happen. So demand is never a problem, otherwise, we might still be using tables to layout pages and using too much code. We all know that the Internet can do anything.
Born for the Internet
CSS 3 properties such as border-radius, box-shadow and text-shadow are beginning to gain momentum in advanced browsers such as webkit (Safari, Chrome, etc.) and Gecko (Firefox). They (these CSS properties) already create lighter pages and richer experiences for users, and they degrade gracefully. However, these are just a few of the many things CSS 3 can do for us.
In this article, we'll go a step further and look at more advanced CSS3 techniques such as transformations, transitions, and animations. We'll cover the code itself, browser support, and some examples that properly demonstrate how these new properties can improve both your design and the overall user experience.
CSS Transformation
CSS transformation is a W3C draft. But it didn't enlighten me when I first sat down to read all of its features to learn a few things. As you can imagine, this document is written in technical terms, and it focuses more on deformed graphical (i.e. plot) elements and matrices. Having not touched matrices since taking calculus freshman year, I had to do a lot of good old browser testing and guess-and-check for this chapter.
After reading every tutorial I could find and lots of browser testing, I've come up with some useful information about CSS transformations that everyone can benefit from.
transform
The transform attribute implements some of the same functionality that can be implemented with SVG. It can be used on inline elements and block elements. It allows us to rotate, scale and move elements - with just one line of CSS code.
The biggest criticism of some avant-garde designs is that text is not selectable (it must be achieved by cutting pictures). When you become proficient in using the transform attribute to control text, this is no longer a problem, because this is a pure CSS method, so the text within the element will remain optional. This is a huge advantage of CSS over using images (or background images).
Some fun and useful morphing features:
rotate
Rotate allows you to rotate an object by passing a value in degrees.
scale
Scale is a scaling function that can make any element larger. It takes positive and negative numbers as well as decimals as arguments.
translate
Translate repositions elements based on X and Y coordinates
skew
As the name suggests, skew is to tilt the object, and the parameter is the degree.
matrix
transform supports matrix transformation, which is to reposition elements based on X and Y coordinates
Let’s take a deeper look at each feature.
Rotate
The transform attribute has many uses, one of which is translate (rotation). Translate rotates an object based on angle and can be used for inline elements and block-level elements. It can achieve cool effects.
The following is the quoted content: #nav{ |
Please note that in IE8 (non-standard mode) it requires you to write "-ms-filter" instead of "filter".
Browser support
Browser support for translate is surprisingly broad. In the CSS snippet above, we simply add the -webkit- and -moz- prefixes and rotate the #nav element -90 degrees.
Pretty simple, right? 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 a filter for this: the graphics rotation filter. It can have 4 rotation values: 0, 1, 2, and 3. You won't get the same granular control as Webkit and Gecko, but it will at least be somewhat consistent (even with IE6). Although this filter only supports 4 values, which seems a bit useless, for IE, it is better than nothing.
scale
Scale doesn't work like you think: it simply shrinks and enlarges an element. The zoom function takes both width and height values, which can be positive, negative, or decimal.
Positive values enlarge an element, as you would expect, based on the specified width and height.
Negative values do not shrink the element, but flip it (for example, text is reversed) and scale it accordingly. However, you can shrink or shrink an element using a decimal number less than 1 (e.g. .5).
The following is the quoted content: #nav { |
Browser support
The scale attribute is currently only supported by Firefox, Safari and Chrome, and so far no IE version supports it. Scaling an object is a fairly meaningful design choice. It can be used via progressive enhancement:hover, which can add a little interest to your navigation.
The following is the quoted content: #nav li a:hover{ |