Css3 animation (transition) attribute discussion, css3transition

Css3 animation (transition) attribute discussion, css3transition

CSS 3 animation effects are often used in webapp reference development. Next we will discuss the use of this attribute.

Where can I define an animation effect?
CSS 3 animations are usually defined by mouse events or state events. We can usually define them by using pseudo classes in CSS and mouse events in js. Js events can also be used, such as click, focus, mousemove, mouseover, and mouseout.

Basic transition Syntax:
Css 3 animations are implemented by combining the transition attribute with other css attributes (color, width and height, deformation, and position.
Transition Syntax:

Java code

1. Transition: [transition-property] | [transition-duration] | [transition-timing-function] | [transition-delay]

Of course, this is short form. We can also write it completely:

Java code

1. Transition-property: none | all | [<IDENT>] [',' <IDENT>] *;
2. Transition-duration: <time> [, <time>] *
3. Transition-timing-function: Train | linear | extract-in | extract-out | extract-in-out | cubic-bezr (<number>, <number>) [, metric | linear | cost-in | cost-out | cost-in-out | cubic-bezr (<number>, <number>)] *
4. Transition-delay: <time> [, <time>] *

1. attributes to be changed
Transition-property: the attribute to be changed. For example, the element width is width, and the text color is color. W3C provides a list of convertible attributes:

CSS attribute change object
Background-color
Background-image is just a gradient
Background-position percentage, Length
Border-bottom-color
Border-bottom-width Length
Border-color
Border-left-color
Border-left-width Length
Border-right-color
Border-right-width Length
Border-spacing length
Border-top-color
Border-top-width Length
Border-width Length
Bottom percentage, Length
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
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
Top percentage, Length
Vertical-align percentage, length, keyword
Visibility
Width percentage, Length
Word-spacing percentage, Length
Z-index positive integer
Zoom number
This value also has a powerful "all" value, indicating all the attributes in the Table above;
In addition to the above attributes, of course, there are also CSS 3 variants highlighted in css3, such as amplification and reduction, rotation and oblique cutting, and gradient.

2. animation time
Transition-duration: the animation execution time, in seconds. For example, 0.1 seconds can be written as "0.1s" or ". 1s". Note that there is a "s" unit later.

3. Calculation of animation execution
Transition-timing-function: the calculation method of animation execution. Here, the time function is a broken beiser curve. Fortunately, css3 has mentioned several values:
Slow: Slow down gradually. The function is equivalent to the besell curve (0.25, 0.1, 0.25, 1.0 ).
Linear: linear excessive. The function is equivalent to the besell curve (0.0, 0.0, 1.0, 1.0 ).
Slow-in: from slow to fast, the function is equivalent to the besell curve (0.42, 0, 1.0, 1.0 ).
Forward-out: From fast to slow. The function is equivalent to the besell curve (0, 0, 0.58, 1.0 ).
Slow-in-out: from slow to fast to slow. The function is equivalent to the besell curve (0.42, 0, 0.58, 1.0)
Cubic-besuppliers: The specific cubic-besuppliers curve. (X1, y1, x2, y2) four values are specific to the Point P1 and point P2 on the curve. All values must be in the [0, 1] region; otherwise, they are invalid.

4. animation latency
Transition-delay: the length of wait between the action and the start of the transformation. It is usually expressed in seconds (for example,. 1 s ). If you do not want to delay, this value can be omitted.
Let's look at a simple example after talking about so much:

Java code

1. <Ul class = "test">
2. <Li> background color transition </li>
3. <Li> background color transition </li>
4. <Li> background color transition </li>
5. <Li> background color transition </li>
6. <Li> background color transition </li>
7. </Ul>
9. <Style>
10. . Test {}
11. . Test li {background-color: # eee;
12. -Moz-transition: background-color. 5 s background-in;
13. -Webkit-transition: background-color. 5 s background-in;
14. -O-transition: background-color. 5 s transition-in;
15. -Ms-transition: background-color. 5 s background-in;
16. Transition: background-color. 5 s audio-in ;}
18. . Test li: nth-child (1): hover {background-color: # bbb;} // move the mouse over the background from # eee to # bbb
19. . Test li: nth-child (2): hover {background-color: #999;} // move the mouse over the background from # eee to #999
20. . Test li: nth-child (3): hover {background-color: #630;} // move the mouse over the background from # eee to #630
21. . Test li: nth-child (4): hover {background-color: #090;} // move the mouse over the background from # eee to #090
22. . Test li: nth-child (5): hover {background-color: # f00;} // move the mouse over the background from # eee to # f00
23. </Style>

How to Use CSS3 for transition and animation?

Div. trans {width: 100px; height: 100px; background: gray; transition: width 2 s;-moz-transition: width 2 s;/* Firefox 4 */-webkit-transition: width 2 s;/* Safari and Chrome */-o-transition: width 2 s;/* Opera */} div. trans: hover {width: 300px;} div. ani {width: 100px; height: 100px; background: red; position: relative; animation: mymove 5S infinite;-moz-animation: mymove 5S infinite; /* Firefox */-webkit- Nimation: mymove 5S infinite;/* Safari and Chrome */} @ keyframes mymove {from {left: 0px;} to {left: 200px ;}} @-moz-keyframes mymove/* Firefox */{from {left: 0px;} to {left: 200px ;}} @-webkit-keyframes mymove/* Safari and Chrome */{from {left: 0px;} to {left: 200px ;}} at the beginning, W3C CSS Workgroup refused to add CSS3 transition and animation to the official standard. Some members thought that the transition effect and animation are not style attributes and can be implemented using scripts. Syntax: transition: property duration timing-function delay; Description: ValueDescriptiontransition-property specifies the name of the CSS attribute to be changed transition-duration specifies how much time the transition effect takes (s/MS) transition-timing-function specifies the speed of the transition effect. transition-delay defines the delay time of the transition effect. example: <style type = "text/css"> div {width: 100px; height: 100px; background: red; transition: width 2 s;-moz-transition: width 2 s;/* Firefox 4 */-webkit-transition: width 2 s;/* Safari and Chrome */-o- Transition: width 2 s;/* Opera */} div: hover {width: 300px;} </style> <div> </div> 2. animationCSS animation (Animations) simply means secretly changing a certain value of CSS within a certain frequency within a fixed animation time, so as to achieve visual conversion animation effect. Next, let's take a look at the next simple example: <style type = "text/css & quot ...... the remaining full text>

When you write a css style, use an image to locate it and add the transition attribute to an element.

The transition attribute is used to add smooth animation effects to changes in other attributes. Your code has many styles similar to the following two sentences:
. Jxyd a {top: 67px; left: 100px; background: url (images/login/jsyd.jpg) no-repeat left top ;}
. Jxyd a: hover {background: url (images/login/jsyd.jpg) no-repeat-176px top ;}

During hover, the changed attribute value is left →-176px, which naturally produces a scrolling effect.

I don't know what kind of effect you mean, so I can't propose a specific modification scheme.