Shulou(Shulou.com)06/03 Report--

This article is about how to achieve transition in CSS3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS3 transition

For years, Web front-end developers have been looking for some animation interaction through HTML and CSS instead of using JavaScript or Flash. Now their wish has come true. CSS3 not only brings us some special functional modules introduced earlier, but also adds some animation functional modules for Web designers. You can trigger an element through: hover,: focus,: active,: checked, or JavaScript, so that the appearance changes are more subtle and do not feel "hair-trigger". For example, hover modifies the link color. When you hover the mouse in CSS2.1, it immediately changes from one color to another. Using the transition function in CSS3, when the mouse is hovering, the color transitions from one color to another within a certain period of time, giving users a better and more delicate experience.

The transition function of CSS3 is like a kind of butter, triggering a smooth transition through some simple actions of CSS. The transition function described in the W3C standard is simple: CSS3's transition allows the attribute values of CSS to transition smoothly over a certain period of time. This effect can be triggered by a mouse click, focus, click, or any change to the element, and smoothly animate the attribute value of the CSS.

In the past, animation in Web relied on JavaScript and Flash implementations, but native CSS transitions require much less resources on the client side, making them smoother. CSS3 transitions are declared along with regular styles on elements. Whenever the target property changes, the browser applies the transition. In addition to using JavaScript to trigger actions, you can also trigger actions through pseudo-classes in CSS, such as: hover,: focus,: active,: target,: checked, and so on. This is important: instead of animating in JavaScript, you just need to change one property value and rely on the browser to do all the important work. Here are the steps to create a simple transition using CSS:

1)。 Declare the initial state style of the element in the default style.

2)。 Declare the final state style of the transition element, such as the suspended state.

3)。 Add some different styles to the default style by adding a transition function.

The transition attribute is a compound attribute, and transition syntax is usually expressed in a simplified form for simplicity and ease of maintenance.

The transition attribute mainly contains four attribute values:

Transition-property: specifies the CSS property of the transition or dynamic simulation.

Transition-duration: specify the time required to complete the transition.

Transition-timing-function: specifies the transition function.

Http:/ / www.iis7.com/b/wzjk/

Transition-delay: specifies the delay time at which the transition begins.

Specify the transition function transition-timing-function,transition- timing-function property specifies some property that refers to the transition "ease function". This property specifies the transition speed of the browser and the progress of the operation during the transition, and you can specify a value as a predefined function, a ladder function, or a cubic Bezier curve.

So far, the curve functions such as ease, linear, ease-in, ease-out, and ease-in-out are very general and not very accurate in transition animation. Now some animations need to be more and more accurate, and we need to define some more accurate functions.

In CSS3's transition, the syntax for defining cubic Bezier curves is shown on the right: cubic-bezier (P0, P1, P2, P3)

A cubic Bezier curve is shaped by four points. Each point is determined by horizontal and vertical values, which is often said to be determined by X and Y values.

The values of these points are decimals or percentages, but it is rare to use percentages to set a cubic Bezier curve point. And their values are all decimals of 0: 1. However, it is important to note that the P0 and P points in the cubic Bezier curve cannot be set because they always exist in the HTML, that is, they will always be (0memery 0) and (1pencil 1).

Note that each point value in a cubic Bezier curve allows only a value of 0 to 1.

The step () function, and the step () function is used to divide the entire operation area into intervals of the same size, each of which is equal. The function also specifies whether an additional percentage of output occurs at the start or end of the interval (in other words, if the percentage of output is 0%, the initial point of the input change).

The step () function is unique in that it allows animation to be played at regular intervals. For example, on the step () function graph, you can see that the animation attribute ratio starts at 0%, rises to 50%, and reaches 100% at the end of the animation (that is, the end state attribute). And each step in each step () function is not smooth enough in the transition animation.

Step (

[, [start | end]]?) The step () function mainly consists of two parameters.

The first parameter is a numeric value

Used primarily to specify the number of intervals between the step () function, which must be a positive integer greater than 0

The second parameter is optional, either start or end, and defaults to the end value if the second parameter is omitted. Where step (1, start) is equivalent to step- start; step (1, end) is equivalent to step- end.

Pseudo element trigger

When using transition, mouse hover (: hover) is commonly used to trigger the transition.

To show that this has nothing to do with the actual event that triggered the transition, and to emphasize the importance of the state change, here are some other ways to trigger the transition.

1. Use the: active ": active" pseudo class to indicate the state that appears when the user clicks an element and holds down the mouse button.

two。 Using the: focus ": focus" pseudo class usually occurs when an element receives keyboard focus. A transition occurs on the text input box element, and when the element gets focus, the text input box element width and background color transition is performed.

As an edge here, when applying transitions to the ": hover" pseudo-class, it's best to add ": focus" to the selector stack. This will enrich the experience of mouse and keyboard users.

3. Use the: checked ": checked" pseudo class to trigger the transition when the following occurs. When the text box is selected

4. Another way to trigger a change in the state of an element is to use a CSS3 media query (Media Queries).

5. JavaScript trigger if the transition can be triggered based on state changes in CSS, you can naturally do this through JavaScript.

Implicit transition "implicit transition" refers to the transition from one attribute to another when one property changes.

Thank you for reading! This is the end of the article on "how to achieve transition in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.