Transform, Translate, Translaton, Animation Animation
Chatting with friends when I was not busy recently, and found that the memory of myself and transform turned out to be so vague. Because I usually used less, it is easier to remember. I was beaten like today ~~
TRANSFORM in CSS3 mainly includes the following:Rotate rotate、Turn SKEW、Scalf SCALEmobile translateandmatrix deformation Matrix。
rotation: Rotate () Rotate the given angle clockwise, allow negative value Rotate (30DEG)
Twist: SKEW () Element Flip the given angle, according to the given horizontal line (X -axis) and vertical line (y -axis) parameters: SKEW (30DEG, 20DEG)
scaling: Scale () amplifies or reduces, according to the given width (X -axis) and height (Y axis) parameters: Scale (2,4)
Mobile: Translate () translation, transmitted into x, y values, which represents the distance between the X -axis and the y -axis: Translate (30px, 50px)
Whether it is rotating or stretching, it is essentially the application MATRIX () method to implement (modify the Matrix () method to fix a few values), but it is similar to the expression form of transform: rotate, and it is easier for us to understand , Memory and get started.
All 2D conversion methods are combined: matrix () rotation, zooming movement, and tilt elements.
matrix(scale.x,scale.y,translate.x,translate.y)
Transform: Rotate rotation | Scale zoom | SKEW twisted | Translate mobile | Matrix matrix deformation;
Integrity: Transform: 30DEG 1.5 30DEG 20DEG 100px 200px; // Need space to separate
Transform rotation is a rotation around a center point, and this center point is the point corresponding to the transform-origin property, and it is also an important basis for all matrix calculations.
Change the starting point location transform-Origin: bottom left;
Translate is a method of Transform. Translate represents movement. Through the Translate method, the element moves from the current position to coordinates according to the given X (Left) and Y (TOP) coordinates.
usage：
//translate
transform:translate(50px, 100px);// Element /3 3position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
transform:translate(-50%,-50%);
background:gray;
Transition allows the CSS attribute to be smooth in a certain period of time. Transition specifies how a certain attribute (such as Width) transition between two values.
Transition mainly contains four attribute values:
- The attribute of the transformation: transition-partty;
- The time for transformation: transition-duration;
- During the duration period, the change rate change: transition-timing-function // Example:
Value: Ease (slowly slow down), linear (uniform speed), Ease-in (from slow to fast), ease-out (from fast to slow), ease-in-out Cubic-bezier (this value allows you to customize a time curve).
- Change delay time: transition-delay
Requires the event trigger, such as clicking, getting the focus, loss of focus, etc.
grammar：transition: property duration timing-function delay;
For example: transition: width 2S Ease 0s;
Animation is also to achieve animation by specifying how to transition between two values by specifying a certain attribute (such as Width).
// Define animation@keyframes move {
from{
}
to{
}
}
@keyframes move {
0%{
}
100%{
}
}
call animation
Animation: Animation name Animation Time Animation Speed Animation Delayed Animation Times Animation Intelligent Play Status The Status of Animation
- Animation name: Animation-name
- Animation time Animation-duration
- Animation speed Animation-Timing-Function: Linear (Vulgar start, end at low speed) Steps ()
- Animation delay Animation-Dlay
- Animation-purpose-count: Infinite
- Animation direction Animation-Direction:
- Animation Play Status: Animation-PLAY-State: Running Pause
- When the animation is completed: Animation-FILL-MODE: Forwards Backwards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: move 5s linear infinite;
}
@keyframes move {
0%{
left: 100px;
}
50%{
left: 150px;
}
100%{
left: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
andtransitionThe difference is:
- animationcan display the attribute value of the current frame through keyframe, andtransitioncan only be carried out in hidden formula (the attribute value of each frame cannot be specified), so relatively speaking
The function ofanimationis more flexible.
- animationThrough the changes in the value of the simulation attribute, the animation is achieved. After the animation is over, the attributes of the element have not changed; andtransitonIndeed the attribute value of the element, and the attributes of the element have changed after the animation is over; this will produce a large difference in actual applications.