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

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

One css3 transition

Css3 transition allows us to change from one attribute value to another in a limited period of time.

● transition-property: specify the properties to convert

● transition-duration: specifies the duration of the conversion

● transition-timing-function: specifies how the speed of the conversion changes over its duration

● transition-delay: specifies the delay of the transition effect (in seconds)

In the following example, we set the transition property to a conversion effect with a duration of 5 seconds. And set up the ease-in timing function, which has the effect of fading in.

Css Code:

Transition:transform 5s ease-in

Transition effects can be applied to a variety of css attributes, including background color, width, height, opacity, etc.

In the following example, the width and height of the div element are 100px and have a red background. We specify a transition effect for the width property with a duration of 3 s.

Css Code:

Div.transition {width:100px; height:100px;background:red;color:white;transition:width 3s;}

Div.transition:hover {width:250px;}

The effect is as follows:

If you hover the cursor over the div element, it moves from left to right.

When the cursor is moved out of the div element, it will gradually change back to its original style.

The transition-timing-function property specifies the speed curve of the transition effect.

It can have the following values:

Ease: the animation starts slowly and then accelerates (default)

Ease-in: start slowly, then accelerate, suddenly stop.

Ease-out: start quickly, but slow down and stop.

Ease-in-out: similar to mitigation, but more subtle acceleration and deceleration.

Linear: uniform conversion

The cubic-bezier () function, which allows you to define your own values in the cubic-bezier (Cube-Bessel) function. The range of values is between 0 and 1.

Css Code:

Transition-timing-function:cubic-bezier (0pd0pl 1pl)

Two css3 transform:rotate ()

Transform in css3 allows you to flip, rotate, scale, and tilt elements.

Transform is the effect of changing the shape, size, and position of an element.

Css3 supports 2 d and 3 d conversions.

Set the angular rotation of 15deg (rotate clockwise), the css code is as follows:

Transform:totate (15deg)

Positive values rotate clockwise; negative values rotate counterclockwise.

Three css3 transform-origin,translate (), skew ()

The transition-origin attribute allows you to change the position of the element to be converted. The default value of this attribute is 50% 50%, corresponding to the middle of the element.

In the following example, we set the origin of the .x axis (horizontal) to 30% from the left when the transform-origin property is used with transform-ratate.

The origin of the y-axis (vertical) is set to 80% from the top.

Css Code:

Div.empty-div {position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

Div.green-div {padding:50px; position:absolute;background-color:LightGreen;border:2px solid red;transform:rotate (15deg); transform-origin:30% 80%;}

00 is the same as the upper left, 100% is the same as the lower right.

The transform-origin property must be used with the transform property.

The translate () method moves an element from the current position (based on the given parameters of the x and y axes). A positive value sets the element

Push down to the right of its default position. Negative values drag the element up and to the left of its default position.

Css Code:

Transform:translate (120pxmae60px)

Skew () tilts the element by setting the tilt angle values for the x and y axes.

The following example tilts the element 45 degrees along the x-axis

Css Code:

Transform:skew (45deg)

-webkit-transform:skew (45deg)

If the second parameter is not specified, its default value is zero.

Four css3 scale () functions and multiple transformations

The scale () method increases or decreases the size of the element based on the set height and width parameters. 1 represents the original size, 2 represents twice the original size, and so on.

Css Code:

Transform:scale (0.70.7)

If only one parameter is passed, the default width and height use this parameter.

You can use more than one transformation at a time. For example, rotate and scale the size of elements at the same time. To apply multiple transformations to elements, you only need to separate them with spaces.

Css Code:

Transform:rotate (35deg) translate (120px)

Five css3 key frames and Animation

Animation changes an element from one style to another.

You can change as many css properties as you need.

Keyframes save the style of the element at a specific time

@ keyframes rule

When you specify a css style in the @ keyframes rule, the animation will gradually change from the current style to the new style at some time.

For an animation to work, you must bind the animation to an element.

The following example will change the background color of the element three times: 50% complete animation, 70% complete animation, and 100% complete animation.

@ keyframes animation-name {0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}

100% {background-color:green;}}

Animation-name is the name specified for the animation, which you can set to any name.

As an alternative to percentages, you can use the from and to keywords instead of 0% start and 100% end points, respectively.

For an animation to work, you must bind the animation to an element.

In the following example, the animation lasts one second and changes the background color of the red div to green and blue

Div.animation {width:100px;height:100px;background-color:red;animation-name: can; animation-duration:1s;}

Can @ keyframes {0% {background-color:red;} 50% {background-color:green;} 100% {background-color:blue;}}

The background color will change automatically within 1 second.

Animation-name: specifies the name of the animation.

Animation-duration: specifies the duration of the selected animation.

If you specify the animation-duration property, the animation will not work. Because the default value is 0.

This is the end of the introduction of "the method of css3 transition and Transformation". 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.