H5 of 13__CSS transitions, animations and transformations

1. Introduction

On touch devices, animation is the feedback of user gestures.

In all browsers, JS is executed in a single thread. If There are asynchronous tasks, such as setTimeOut(), which are added to the execution queue and then executed when the thread becomes idle.

#When the code in the timer is executed, other codes cannot be executed. That is to say, event handlers are executed in queue order.

#For these reasons, we should try to avoid using setTimeOut( ) animation, you can use CSS transition to achieve the same effect, and the experience is better.

2. Transition

CSS Transition can be done using CSS The simplest animation implemented. The power of transitions is that they are executed in a separate thread from the JS execution thread.

Using animations allows you to have a more dynamic interface and still keep event handlers running quickly.

An idea: Any CSS property that can be animated can be animated using a transition.

Changes in the value of an animated CSS property trigger animations. Use the CSS transition property to apply transitions.

The syntax is as follows:

transition: [property] [duration] [timing-function] [delay] ;

All values are optional.

For example: transition: color 1s ease-out, specifies a transition in which the color change gradually becomes slower within one second. Although the transition has now become the standard , but it still requires a prefix to be used in browsers with WebKit core.

No prefix is required in IE, Opera, and Firefox browsers.

Look at a piece of code, an example of hiding and showing an image when a button is touched, here are the fade-in and fade-out effects:

Apply transition through CSS

Look at the renderings:

#The complete html page is as follows:

The css file is as follows:

The above is the content of H5-13__CSS transition, animation and transformation. For more related content, please pay attention to the PHP Chinese website (www.php. cn)!