CSS transition (CSS transition effect)

Document directory

• Origin of CSS transition effect
• Introduction to progressive enhancement Design
• First, we will introduce some concepts of transition.
• A simple example of transition
• Add multiple transitions
• What attributes can generate transition?
• Transitional timing and latency
• Global transition?

Although the screen display technology is expected to improveCSSAndHtmlBut only a few interactive design controls are provided, and they are only bidirectional rather than progressive. For example, a link can only be one color or another color, the text field can only be one size or another. A photo is either transparent or opaque. There is no transition between the two States.

This inelegant switching effect makes many pages feel abrupt. Although we can useDHTMLAndJqueryTo achieve the transition effect, but this requires a lot of code to achieve the original simple thing.

In this article, we use a simple method to add a transitional effect to the page. You will find thatCSS ransitionsAnd how to use them.

A few months ago, I mistakenly suggested that designers use the new css3 technology to implement some of the basic styles they have been expecting for a long time, but the problem is that these technologies are in IE (including IE8) cannot be implemented. Some readers think that it is rash to use new technologies that the 3/4 users cannot see.

For these readers, I will say: Don't rush to decide first, because I will introduce you to another attribute in CSS, which can add a transition effect to any element with just a few lines of code.

CSS transition technology is being introduced in css3, but CSS transition has been added to WebKit as an extension. This means that this technology can only be used in WebKit-based browsers, such as Apple Safari and Google Chrome.

Origin of CSS transition effect

Transition has been part of WebKit for some time. Based on this, Safari UI has achieved many cool effects that other browsers cannot achieve. However, W3C CSS workgroup refuses to add it to official standards. Some members believe that the transition effect is not a style attribute and can be implemented using scripts.

However, many designers and developers, including me, think that the transition effect is actuallyDynamic StyleAttribute, rather than the static style that many of us use.

Fortunately, the debate has passed. In February last March, representatives from Apple and Mozilla began to add the CSS transition module to CSS Level 3 specification, which is very close to that of Apple's WebKit.

Introduction to progressive enhancement Design

Before proceeding to the following content, let's emphasize one point: if styles do not have interoperability on browsers,Never rely on style for Website Functions.

This means that you can use styles such as transition effects and enhanced design to improve user experience without sacrificing the availability of users who cannot see them. As long as users can leave those transition results, they can still complete their tasks.

First, we will introduce some concepts of transition.

CSS transition does not replace DHTML, but it can enhance your design in browsers that support transition effects without worrying about damaging the browsing experience of other users.

You need to see the transition effect in Apple Safari 3 + or Google Chrome. Both browsers can be used on Mac and PC.

Reverse

The most obvious effect of transition is to highlight elements, such as links, tables, form fields, and buttons, When you hover your mouse over an element. Transition adds a very smooth appearance to the page.

Example #1

Html

<div class="example">  <p><a href="#">Link</a></p> </div>

CSS

#example1 p { text-align: left; }#example1 a:link { font-size: 3em; color: blue; background-color: rgb(255,255,255); -webkit-transition: color .5s linear, background-color .5s linear;  transition: color .5s linear, background-color .5s linear;  }#example1 a:hover { color: red; background-color: rgb(255,204,255); -webkit-transition: color .5s linear, background-color .5s linear;  transition: color .5s linear, background-color .5s linear;  }#example1 a:active { color: green; -webkit-transition: color .5s linear;  transition: color .5s linear; }

Drop-down menu

CSS transition makes it easy to implement a drop-down menu with pure CSS.

Example #2

Html

<div class="example">  <ul class="menu">   <li>About Us</li>    <ul class="drop">     <li><a href="#">Our Team</a></li>     <li><a href="#">News</a></li>     <li><a href="#">Reviews</a></li>     <li><a href="#">Contact</a></li>    </ul>  </ul> </div>

CSS

#example2 { height:200px; }#example2 a:link { color: blue; text-decoration: none; -webkit-transition: color .25s ease-in 0s; transition: color .25s ease-out 0s; }#example2 a:hover { color: red; -webkit-transition: color .25s ease-in .1s; transition: color .25s ease-out .1s; }#example2 a:active { color: green; transition: color .25s ease; }#example2 ul { list-style: none; margin: 0; padding: 0;}#example2 .menu { display: block; position: relative; top: .9em; left: 0; padding: 10px; height: auto; width: 100px; border: 8px solid rgba(204,204,204,.5); cursor: pointer; background-color: rgba(255,255,255,.75); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}#example2 ul.menu  li { font-weight: normal; list-style: none;}#example2 ul.menu  li a:link { font-weight: normal; list-style: none; font-size: 12px; margin-left: 0; padding-left: 0;}#example2 ul.menu ul li { font-weight: normal; padding: 5px 0; margin:0; border-top: 1px solid rgb(204,204,204); background-color: rgb(255,255,255); -webkit-transition: background-color .5s ease;  transition: background-color .2s ease; }#example2 .drop { display: block; position: relative; height: 0; overflow: hidden; width: 100px; opacity: 0; -webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s; transition: opacity .25s linear 0s, height .25s ease-out .1s;  }#example2 ul.menu ul li:hover { background-color: rgb(234,234,234); -webkit-transition: background-color .5s ease;  transition: background-color .2s ease; } #example2 ul.menu:hover>.drop { height: 140px; opacity: 1; -webkit-transition: opacity .25s linear 0s,  height .25s linear 0s; transition: opacity .25s linear 0s,  height .25s linear 0s; }

Animation

You can use CSS transition to move an object between two points.

Example #3

Html

<div class="example">  <div class="move">   <p><strong>Example #3</strong></p>   <p class="control" style="color:#FFFFFF;">Click & Hold!</p>   <div id="astro"></div>  </div> </div>

CSS

#example3 { background-color: black; color: white;}  #example3 .control { text-align: center; font-size: 3em;}  #example3 .move { cursor: pointer;}  #example3 .move>#astro { position: relative; top: 0; left: 250px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s  ease-in-out, left 2s ease;}  #example3 .move:active>#astro { top: 10px; left: 10px; -webkit-transition: top 2s ease-in-out, left 2s ease; transition: top 2s  ease-in-out, left 2s ease;}

Transition, status, and action

We will stay here for a moment. before getting a deeper understanding of the transition, we must understand the various states in which an element produces the transition effect.

The State defines how a specific element interacts with the user currently. They are marked with pseudo classes in CSS. For example, when you hover the mouse over an element, the element will apply a pseudo hover style.

Dynamic pseudo class	Affected Elements	Description
: Link	Link only	Unaccessed Link
: Visited	Link only	Accessed Link
: Hover	All elements	Hover Element
: Active	All elements	Clickable Element
: Focus	All elements that can be selected	Selected Element
None	All elements	Default status of all elements

The transition will gradually change between two different States. For example, the original color value of an element changes slowly to the hover color value after the intermediate color.

A simple example of transition

Let's consider adding a hover color transition effect for a link. Like other CSS attributes, the transition attribute is directly applied to the CSS selector. This attribute has the following four values:

CSS Property

CSS attributes indicate the attributes to be changed (such as colors ). The following list lists the attributes that can generate a transition.

Duration

Duration indicates the duration of the transition, in seconds (for example,. 25 s)

Timing Function

The timing function controls how duration times. You can let the effect speed up or slow down or even specify a cycle or timer for it, instead of simply using a number for timing.

Delay

Latency indicates the time after an action is triggered to generate a transitional effect, usually in seconds. This value can be ignored if no latency is required.

Because the transition attribute is an extension of WebKit, we must include the transition and-WebKit-transition attributes for backward compatibility:

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

Now, when hovering over a link, its color will change from the default color to the final color within 0.25 seconds.

Of course, we need to change it back to the default color. We give the pseudo class:link(If possible:visited) Before fading out, add a very short transition (0.1 seconds ):

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

Add multiple transitions

Because transition is a CSS attribute, if you add multiple transition attribute instances, the last added instance will overwrite the previous one. Therefore, in the following rules, only the background color produces a transitional effect:

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

To achieve multiple transitions, you can separate the attributes to be changed with commas in the same transition attribute:

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 example will make the foreground color and background color have a transitional effect at the same time.

What attributes can generate transition?

Almost any CSS attribute that can set the color, length, and position value can produce a transitional effect, including many CSS 3 attributes. One notable exception is box-Shadow.

According to W3C transition standards, there is a list of CSS attributes that can generate transition effects, indicating which variables can change. I emphasized some of the useful attributes.

CSS attributes	Changeable Variables
Background-color	Color
Background-Image	Gradient only
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	Length, percentage
Color	Color
Crop	Rectangle
Font-size	Length, percentage
Font-weight	Number
Grid -*	Various
Height	Length, percentage
Left	Length, percentage
Letter-spacing	Length
Line-height	Number, length, percentage
Margin-bottom	Length
Margin-left	Length
Margin-Right	Length
Margin-top	Length
Max-height	Length, percentage
Max-Width	Length, percentage
Min-height	Length, percentage
Min-Width	Length, percentage
Opacity	Number
Outline-color	Color
Outline-offset	Integer
Outline-Width	Length
Padding-bottom	Length
Padding-left	Length
Padding-Right	Length
Padding-top	Length
Right	Length, percentage
Text-indent	Length, percentage
Text-shadow	Shadow
Top	Length, percentage
Vertical-align	Keyword, length, percentage
Visibility	Visibility
Width	Length, percentage
Word-spacing	Length, percentage
Z-Index	Integer
Zoom	Number

Transitional timing and latency

You can change the timing of the transition to make the transition slow at the beginning, speed up at the end, and vice versa; or add other changes in the middle. CSS transition uses five keyword values for custom timing curves.

Name	How to work
Cubic-bezr (x1, Y1, X2, Y2)	The values of X and Y are used to define the beiser curve shape of the timing function, located between 0 and 1.
Linear	Uniform speed
Bytes	Slow down
Callback-in	Acceleration
Timed-out	Slow down
Memory-in-out	Acceleration then slows down

Global transition?

The transition will soon become a standard operation step for feedback on the user interfaces of all websites. To add ubiquitous transition effects to the entire website, a global selector is used. By applying the default transition attribute to all elements, you can achieve a unified transition effect.

*: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;}

There is a controversy here that applying the transition attribute to all elements on the page will slow down the browser's resolution speed. But I have not found any evidence to prove this point. Does anyone know?

Jason Cranford tegou has written more than 13 digital media books, including: Speaking in styles: the fundamentals of CSS for web designers. for more information about CSS and web printing, please refer to Jason's new book: fluid web typography. you can use follow Jason: @ jasonspeaking on Twitter.

Address: http://www.webdesignerdepot.com/2010/01/css-transitions-101/

Source: http://hi.baidu.com/thinkmad/blog/item/deb0c0fdde4b064ed6887db5.html