Home > Developer > Web Develop
The transition of CSS3 provides a smoother, more nuanced user experience for changing elements. For example, when CSS2.1, we use : hover Pseudo-class changes the link color, the color will be very stiff directly from one color to another color. However, after using the transition properties of CSS3, this color change will be more vivid and delicate.
Here are the basic steps to create a transition:
1, declare the initial state style of the element in the default style
2, declaring the final style of the transition element
3, add the transition function in the initial state style
The transition property of CSS3 is transition , Transition is a composite property, and the simplified syntax is as follows:
transition:[< ' Transition-property ' > | | < ' transition-duration ' > | | < ' transition-timeing-function ' > | | < ' Transition-delay ' >]*
Mainly contains a few properties
Transition-property Specifies the CSS properties of a transition or dynamic simulation transition-duration Specify the time required to complete the transition transition-timing-function Specify the transition function Transition-delay Specify the delay time at which the transition begins to occur
Let's first look at a simple example
<!DOCTYPE HTML><HTML><Head><title>Transition</title><MetaCharSet= "Utf-8" /><styletype= "Text/css">Body{background:#eee;}*{margin:0;padding:0;font-family:Arial, "Microsoft Jas Black";cursor:default;}. Wrap{margin:100px;}. Wrap{transition: Background0.5s ease-in-out;width:100px;Height:100px;background:#92B901;Border-radius:5px;}. Wrap:hover{background:#FFC631;}</style></Head><Body><Divclass= "Wrap"></Div></Body></HTML>
The Transition-property property specifies the name of the CSS property that applies the transition effect, which must be set, otherwise there will be no effect. The default value is all, and any element that can be transitioned transitions. Not all properties can be transitioned, and the following common properties can be transitioned.
| Property name | type |
|---|---|
| Background-color | Color |
| Background-image | Only gradients |
| 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 | Keywords, length, percentage |
| Visibility | Visibility |
| Width | Length, percentage |
| Word-spacing | Length, percentage |
| Z-index | Integer |
| Zoom | Number |
The Transition-duration property specifies the time required for the transition to complete, the default value is 0, and the same can be set for multiple values, as follows:
. Wrap {transition-property:Background,border-radius; transition-duration:0.5s,0.5s; transition-timing-function:ease-in-out,ease-in-out; width:100px; height:100px; background:#92B901;} . Wrap:hover {background:#FFC631; Border-radius:50%;}The Trabsition-timing-function property specifies a "easing function" for some kind of reference transition. You can set the property value to a single transition function, a three-time Bezier curve, and a step function.
Single transition function
1, Ease: (gradually slows down) the default value, the Ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0). 2, Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0). 3, Ease-in: ( Acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0). 4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0). 5, Ease-in-out: (Accelerating and slowing down), The Ease-in-out function equates to Bezier curves (0.42, 0, 0.58, 1.0) 6, Cubic-bezier: (this value allows you to customize a time curve), a specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to point P1 and Point P2 on a curve. All values must be in the [0, 1] area, otherwise invalid.
The Transition-delay property is used to define the delay time, that is, how long after the element attribute value has been changed to perform the transition effect, which defaults to 0. The above example increases the delay time to create a queue animation:
transition-delay:0,0.5s;
Finally, the Transiton property does not get rid of browser compatibility issues like other CSS3 properties. Since transition was first introduced by the WebKit kernel browser, Mozilla and opera are the latest versions to support this attribute, and our popular browser IE family is not supported, in addition, due to the large modern browser Firefox,safari, Chrome,opera are not supported by the standard way of writing, so in the application of transition we need to add their own prefix, it is best to put on the standard of our world, so the standard will cover the previous wording, as long as the browser supports our transition property, Then this effect will be added automatically.
Preliminary study on CSS3-transition attribute Transition
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
