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

In this article, the editor introduces in detail "what is the difference between transition, transform and animation in CSS3". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the difference between transition, transform and animation in CSS3" can help you solve your doubts.

Transition

Transition allows the attribute values of css to transition smoothly over a certain period of time. The syntax is as follows:

Transition:transition-propertytransition-durationtransition-timing-functiontransition-delay [,...]

Related properties of transition:

Transition-property: used to specify the property that performs the transition effect, either none,all or a specific property.

Transition-duration: the duration of animation execution in s (seconds) or ms (milliseconds).

Transition-timing-function: change rate effect. Available values are ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier (custom time curve).

Transition-delay: used to specify the time when the animation starts to execute. The value is the same as transition-duration, but can be negative.

Transform

Transform is divided into 2D and 3D. For the time being, only the commonly used 2Dtransform is introduced, which mainly includes the following transformations: rotate rotate, twist skew, scale scale and move translate, and matrix deformation matrix. The syntax is as follows:

Transform:rotate | scale | skew | translate | matrix

Related properties of transform:

Rotate rotation

The unit of rotate is deg. a positive number represents a clockwise rotation and a negative number represents a counterclockwise rotation.

Scale Zoom

The value range of scale is 0roomn. Less than 1 means zooming out, otherwise it means magnification. For example, scale (0.5 scaleY 2) means that the horizontal direction is twice as small and the vertical direction is twice as large. In addition, you can also set a direction through scaleX or scaleY.

Skew twist

The unit of skew is the same as rotate. For example, skew (30 deg 10deg) means a tilt of 30 degrees horizontally and 10 degrees vertically.

Translate offset

Offsets also include horizontal and vertical offsets. Translate moves horizontally and vertically at the same time (that is, X and Y axes move simultaneously); translateX (x) moves horizontally only (X axes move); translateY (Y) moves vertically only (Y axes move).

Animation

Animation in CSS3 is controlled by a thing called Keyframes Keyframe, whose name starts with "@ keyframes", followed by the "name of the animation" with a pair of curly braces "{}". In braces are some style rules for different periods of time, a bit like our css style. For a style rule in "@ keyframes" that consists of multiple percentages, such as between "0%" and "100%", the syntax is as follows:

@ keyframesIDENT {

From {

Properties:Propertiesvalue

}

Percentage {

Properties:Propertiesvalue

}

To {

Properties:Propertiesvalue

}

}

Or write it all as a percentage:

@ keyframesIDENT {

0% {

Properties:Propertiesvalue

}

Percentage {

Properties:Propertiesvalue

}

100% {

Properties:Propertiesvalue

}

}

Animation and transition have their own corresponding properties, so there are mainly the following types of animation: animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state. Some of these attributes are explained below:

Animation-name Keyframe name:

Used to define the name of an animation, that is, the name of the animation created by the previous keyframes, the default value is none, when the value is none, there will be no animation. If we want to attach several animation to an element at the same time, just use a comma to separate it.

Number of animation-iteration-count animation cycles:

The default is 1, and if you want to do an infinite loop, just set it to infinite.

The direction in which the animation-direction animation plays:

It has only two values, the default value is normal, and if set to normal, each loop of the animation plays forward, and the other value is alternate, which plays the animation forward an even number of times and an odd number in the opposite direction.

Animation-play-state playback status:

It has two main values, running and paused, where running is the default. You can stop the animation you are playing through paused, or you can replay the paused animation through running. This property is not commonly used.

After reading this, the article "what is the difference between transition, transform and animation in CSS3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

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.