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

This article mainly introduces the relevant knowledge of "what is the grammar of transition, transform and animation". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the grammar of transition, transform and animation" can help you solve the problem.

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.

This is the end of the introduction to "what is the grammar of transition, transform and animation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.