Use Transition in CSS to achieve animation effects

Example

The code is as follows:	Copy code
Img { Height: 15px; Width: 15px; } Img: hover { Height: Pixel px; Width: Pixel px; }

Transition is used to specify the time required for state changes.

The code is as follows:	Copy code
Img { Transition: 1 s; }

We can also specify the attributes applicable to the transition, for example, only for height.

The code is as follows:	Copy code
Img { Transition: 1 s height; }

In this way, only the change in height takes one second to implement. Other changes (mainly width) are implemented instantly ~

Example

The code is as follows:

Copy code

<Nav> <Ul id = "main-nav"> <Li> <a href = http://www.111cn.net> HOME </a> </li> <Li> <a href = "#"> a </a> </li> <Li> <a href = "#"> B </a> </li> <Li> <a href = "#"> c </a> </li> </Ul> </Nav> How can this function be implemented? # Main-nav { Opacity: 1; -Webkit-transition: opacity 0.3 s; -Moz-transition: opacity 0.3 s; -Webkit-animation-timing-function: timed-out; -Moz-animation-timing-function: timed-out;  }   # Main-nav a: hover { Opacity: 0.5 ;}

· Transition usage notes
(1) currently, all major browsers (including IE 10) support transition without a prefix, so transition can be safely excluded from the browser prefix.
(2) not all CSS attributes support transition. Check the complete list here and the specific effect.
(3) the transition must be clear about the specific values of the start and end states before calculating the intermediate states. For example, if the height changes from 0px to 100px, transition can calculate the intermediate state. However, transition cannot calculate the intermediate state between 0 px and auto. That is to say, if the start or end setting is height: auto, no animation effect will be generated. Similarly, display: none to block, background: url(foo.jpg(to url(bar.jpg), and so on.

· Limitations of transition
Transition is easy to use, but it has several major limitations.
(1) the transition must be triggered by an event, so it cannot automatically occur when the webpage is loaded.
(2) the transition is one-time and cannot be repeated unless it is triggered repeatedly.
(3) transition can only define the start and end states, but cannot define the intermediate states, that is, there are only two states.
(4) a transition rule can only define changes to one attribute and cannot contain multiple attributes.
CSS Animation was proposed to solve these problems.