CSS transitions # getting started with CSS3 Transformation

Document directory

• Scroll Effect
• Drop-down menu
• Animation

Although people expect some changes on the screenCSSAndHTMLThere is really little to do for interactions on the page, and those still need to be implemented using code.

 

For example, a link is either the color or the color. A text area is either so large or transparent; they are directly changed from one State to another --No transition in the middle.

This makes most web pages somewhat stiff, because the elements will only change or be rigid.

Yes, you can use DHTML, jQuery, or self-compiled JS to achieve excessive implementation, but this requires more code to implement this should be a very simple function.

What we need is a fast and simple method to add a simple transformation effect to the page. In this article, you will find thatCSS Transformation (transition)And how to use their information.

A few months ago, I suggested that designers should begin to use the new CSS 3 technology to implement some of the basic functions they have long been waiting for-the only problem is, none of these technologies can be used in IE, including IE8.

Some readers believe that those technologies will be unreliable if 75% of users do not see them.

To those readers, I want to say "sit down" because I will introduce you to another new CSS attribute, it allows you to add cool transform effects to any element through several lines of code.

CSS transformation has just been introduced in CSS 3, but has been added as a webkit extension. That is to say, they can only be used for webkit-based browsers, including Apple Safari and Google Chrome. However, from the perspective of Opera 10.5 pre-Alpha, Opera will support CSS 3 Transformation in the next 10.5. We strongly recommend that you use Chrome or Safari 4 to view the actual results mentioned in this article.

Where does CSS transform come from?

Transform was once only part of Webkit, and it is the basis of some cool stuff that Safari UI can do but other browsers cannot implement.

However, the W3C CSS workgroup once refused to add transformations to its official features. Some members insisted that transformation is not a CSS attribute and would be better handled by scripts. (I have a similar view in the previous section. I have discussed it with the high temperature. I think CSS animation is beyond the scope of its performance and interaction should be implemented in a script, but later, with the help of ghost Brother, we started to get a new idea-shenfei)

However, many designers and developers, including myself, insist that this is indeed a style-justDynamicStyle, instead of the traditional static style we use everyday.

Fortunately, the debate on dynamic styles has become a thing of the past. In last March, representatives from Apple and Mozilla began to add the CSS conversion module to the CSS 3 feature, which is very similar to the performance that Apple has added to webkit.

A Brief Introduction to design enhancements

Before we proceed, let me emphasize that we should never make the website function dependent style. If this style is not applicable to browsers (that is to say, all common browsers support it ).

I once again stressed that:Never let the website function depend on a style. If this style is not common to browsers.

This means that you can use styles, such as transformations,Design EnhancementTo improve user experience-without sacrificing the availability of users who cannot see them. If you can still use CSS transformations and users can still complete their tasks, you can use CSS transformations.

First, some transformation ideas

CSS transformation will not replace all DHTML, but it will provide some methods to support transition to improve your design in the browser.

You need to download the Apple Safari 3 + or Google Chrome browser to view these changes. Both browsers support Mac and PC systems.

Scroll Effect

The most common usage of transform is to highlight an element when the user's mouse is placed on the element (whether it is a link, table, form or other elements ), transform is a great way to add a smooth interface to the page.

Drop-down menu

The pure CSS menu is easier to implement, while the conversion also allows you to add drop-down and highlight effects to the menu.

Animation

You can move an object between two points on the page and then add an animation effect to it using the transform function.

Changes, statuses, and actions

But please wait. Before learning about transformations, we need to understand the different states that an element can transform.

Status defines how the corresponding elements on the current page interact with users. They are defined in CSS through pseudo-classes. For example, when a user's mouse passes through an element, that element will be controlled by the hover pseudo class.

Dynamic pseudo class	Elements	Description
: Link	Only links	Unaccessed Link
: Visited	Only links	Accessed Link
: Hover	All elements	Mouse over element
: Active	All elements	Mouse click element
: Focus	All elements that can be selected	Element selected
None	All elements	Default status of all elements

Transform works by changing the styles within a period of time between different element states. For example, the color value in the default state of an element will gradually display the intermediate color in the color disk before the color value in the hover state is displayed.

A simple transformation

Let's assume a simple transformation. When the user's mouse goes through a link, the color is transformed from one to another. Like other CSS attributes, transformations are directly added to the selector to use. This attribute can use the following four values.

CSS property

The converted attributes (such as color ). See the following table to learn about the list of CSS attributes that can be transformed.

Duration

The duration of the transformation, usually measured in seconds (for example,. 25 s ).

Timing function

Allows you to control the duration calculation method. Instead of using a simple linear computation, you can make the transformation accelerate (fade in) or slow (fade out), or even specify a beat or count (for example, linear ). more on this later in the article.

Delay

The length of wait between the start of the action and the start of the change, usually expressed in seconds (for example,. 1 s ). If you do not want to delay, this value can be omitted.

Because the conversion attribute starts with Webkit extension, we have to use both the transition and-webkit-transition attributes for backward compatibility.

Let's first introduce these attributes to the hover pseudo class:

12345

a:hover { color: red; -webkit-transition: color .25s linear; transition: color .25s linear;}

Now, when the mouse goes through a link, it will not jump directly from blue to red, but will gradually change their intermediate colors (Transition Colors) with 1/4 seconds ).

 

Of course, we also want to change back to the default link color, so we can add a transformation to the: link (and: visited) pseudo class, and add a simple latency (10 s) before it fades ):

12345

a:link, a:visited { color: blue; -webkit-transition: color .25s linear .1s; transition: color .25s linear .1s;}

Add multiple Transformations

Because a transform is a CSS attribute, if you add multiple conversion instances to the same CSS rule, the last one will overwrite the previous one instead of adding them. Therefore, in the following rules, the only change will be the background color:

12345678

a:hover { color: red; background-color: rgb(235,235,185); -webkit-transition: color .25s linear; transition: color .25s linear; -webkit-transition: background-color .15s linear .1; transition: background-color .15s linear .1;}

Of course, this does not mean that multiple transformations cannot be added-multiple transformations can be separated by commas in the same transform attribute definition:

123456

a:hover { color: red; background-color: rgb(235,235,185); -webkit-transition: color .25s linear, background-color .15s linear .1s; transition: color .25s linear, background-color .15s linear .1s; }

This definition will generate a dual transformation between the color and the background color.

What can be transformed?

Almost all CSS attributes of components with colors, sizes, or positions, including many newly added CSS 3 attributes, can be applied and changed. One notable exception is box-shadow.

Here is a list of CSS attributes that can be converted with transformation objects. Some useful attributes are highlighted.

CSS attributes	Changed object
Background-color	Color
Background-image	Only gradient
Background-position	Percentage, Length
Border-bottom-color	Color
Border-bottom-width	Length
Border-color	Color
Border-left-color	Color
Border-left-width	Length
Border-right-color	Color
Border-right-width	Length
Border-spacing	Length
Border-top-color	Color
Border-top-width	Length
Border-width	Length
Bottom	Percentage, Length
Color	Color
Crop	Percentage
Font-size	Percentage, Length
Font-weight	Number
Grid -*	Quantity
Height	Percentage, Length
Left	Percentage, Length
Letter-spacing	Length
Line-height	Percentage, length, number
Margin-bottom	Length
Margin-left	Length
Margin-right	Length
Margin-top	Length
Max-height	Percentage, Length
Max-width	Percentage, Length
Min-height	Percentage, Length
Min-width	Percentage, Length
Opacity	Number
Outline-color	Color
Outline-offset	Integer
Outline-width	Length
Padding-bottom	Length
Padding-left	Length
Padding-right	Length
Padding-top	Length
Right	Percentage, Length
Text-indent	Percentage, Length
Text-shadow	Shadow
Top	Percentage, Length
Vertical-align	Percentage, length, keyword
Visibility	Visibility
Width	Percentage, Length
Word-spacing	Percentage, Length
Z-index	Positive Integer
Zoom	Number

Change timing and latency

With transformation, you can change the rate of transformation. It is slow at the beginning and then accelerates at the end, and vice versa, or anything between them. CSS conversion has five timing keywords, and allows you to define your own timing curve.

Name	How to work
Cubic-bezr (x1, y1, x2, y2)	The values of X and Y are between 0 and 1 to define the shape of the besell curve used for Time function.
Linear	Average speed
Bytes	Slow down
Callback-in	Acceleration (incremental)
Timed-out	Deceleration (fade out)
Memory-in-out	Acceleration and then deceleration

All transformations?

The change will soon become a standard operation method for all websites, enhancing the user interface experience.

To add a general transformation to your entire website, one way is to add a transform to all selector, similar to CSS reset. The following code adds a default transform to all elements on the page, allowing you to maintain a unified transformation effect:

12345678910

*:link, *:visited, *:hover, *:active, *:focus {-webkit-transition:color .25s linear,background-color .25s linear,border-color .25s linear;transition:color .25s linear,background-color .25s linear,border-color .25s linear;}

One argument against all transformations and explicit opposition to using all selectors as CSS reset is that using a style to all elements of a page slows down page rendering. However, I have not found any evidence of this. Does anyone know?

OK. In fact, CSS transformation is so simple that it is not difficult to understand, and you do not need to use a large number of JS scripts to implement it. This is very convenient and practical. You have to do more exercises several times, you can use it skillfully.

The title of this article is CSS transitions 101,101, which is not easy to understand. In fact, the first course of the U. S. University is usually numbered 101, so 101 generally indicates the meaning of entry and entry. In addition, I used to translate the word transition into "Conversion", but this translation is awkward, after discussing with @ gaowhen, @ ghostzhang, @ ivane, @ hiwanz, @ cnjoel on twitter, I think it is more appropriate to translate it into "transform". Thank you. From: http://www.qianduan.net/css-transitions-101.html