July 13:2D Transitions and transitions, animation effect settings

The conversion of the 2D is achieved by transform, which has 4 different ways:

• Displacement: translate (x-coordinate, y-coordinate), which is the displacement from the upper-left corner to the origin, without affecting other elements
• Scaling: Scale (x multiple, y multiple), which is scaled at the origin of the element center
• Rotation: Rotate (degrees), which rotates at the origin of the element center.
• Skew (twist): Skew (x degrees, y degrees): Twist and pinch in x and y direction simultaneously

Second, the transition is achieved through transition, which can define the transition effect (object, time, type, delay time) for multiple attributes of the element at the same time.

The types of transitions are mainly in the following ways

• Linear: Linear transition
• Ease: Smooth transitions
• Ease-in: from slow to fast
• Ease-out: from fast to slow
• Ease-in-out: From slow to fast to slow

Third, animation effect: Through the animation to set

　　　　

@keyframes Myfirst {
0% {
width:150px;
}

30% {
width:300px; Effect settings when animating from 0% to 100% processes
}

50% {
width:500px;
}

100% {
width:600px;
}
}

. div1 {
width:150px;
height:150px;
Background-color: #21bbca;
-moz-animation:myfirst 4s ease infinite;//a duration of 4S for element myfirst, transitions to smooth transitions, animated animations with infinite loops
}

July 13:2D Transitions and transitions, animation effect settings