The transition and transform properties in CSS3

 

Table of contents

1. The use of transform

 Second, the use of transition

Set the same transition for multiple properties

Set different transitions for multiple properties

---

• transform: transform, change the appearance of the element, there are many ways to change the appearance of the element, such as displacement (translate) , zoom (scale) , rotation (rotate) , tilt (skew), etc., it does not use animation effects, the numerical value changes the appearance of the element Change immediately.
• transition: Transition refers to how a certain attribute value of css changes smoothly, which is commonly referred to as dynamic effect

1. The use of transform

1. The displacement translate(x, y), the x-axis moving to the right is a positive number, and the y-axis moving down is a positive number.

translate(50px, 150px);//Move 50px horizontally and 150px vertically

translate(50px); when there is only one parameter, the default is to move horizontally

2、rotate(you)

Use the rotate method, add the angle value to the parameter, the angle value is followed by the "deg" text representing the angle unit, and the rotation direction is clockwise.

3、scale()

• transform: scale(0.5);//Reduce by half
• transform: scale(0.5, 2);//Two parameters can also be used, the first parameter represents the zoom ratio in the horizontal direction, and the second parameter represents the zoom ratio in the vertical direction.
• transform: scaleX(0.5); // shrink to half of its original width
• transform: scaleY(0.5); // shrink to half of its original height

4. skewX() : Make the element tilt a given angle along the X axis.

transform: skewX(20deg);//Tilt 20 degrees in the horizontal direction

 transform: skewY(20deg);//tilt 20 degrees in the vertical direction,

 transform: skew(20deg);//Incline 20 degrees in the horizontal direction, only one parameter defaults to the horizontal direction

 transform: skew(20deg, 10deg);//The horizontal direction is inclined 20 degrees, and the vertical direction is inclined 10 degrees

 Second, the use of transition

The basic usage of transition:

transition: [property name] [duration] [speed curve] [delay time]

 We can easily use this transition to add a nice animation to a certain attribute. For example, when the value of the height property changes, the  ease transition is performed in a curve after a delay of 0.5 seconds and lasts for 2 seconds:

transition:height 2s ease 0.5s

Or one attribute is not enough and you want to monitor all attributes.

transition: all 2s ease .5s;

All here does not refer to all attributes, but refers to all attributes that can be animated and transitioned. There are many attributes that cannot be transitioned, such as display. You cannot let a display divmode transition slowly.

With the above understanding, when matching with :hoverother pseudo-classes that can cause property value changes, you can easily make an animation effect:

.box {
    width: 10px;
    transition: width 0.4s ease;
}

.box:hover {
    width: 50px;
}

Set the same transition for multiple properties

What if you want to assign the same transition to multiple properties? As follows: Simultaneously monitor width and height for transition

transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;

These four attributes are equivalent to the four attributes in abbreviation, but don't abbreviate them like this! will report an error.

transition: height, width 2s ease .5s;

 Because before the comma, it must be a complete animation description

Set different transitions for multiple properties

If you want to specify the transition heightof 2s, what should I do? as follows:width3s

transition-property: height, width;
transition-duration: 2s, 3s;

 It is indeed possible to write in this way, the one before the first comma is a group, and the one before the second comma is another... But if there are more attributes to write, don’t you have to start counting commas? So we can abbreviate it in a more convenient way:

transition: height 2s, width 3s;