Writing in the front

It’s already 2020. Have you learned CSS3 animation this year?

CSS animation is an awkward issue, because companies don’t use CSS animation very much, and most developers are used to JavaScript animation, so many programmers are reluctant to learn CSS animation (at least I am). But a front-end engineer who doesn’t know CSS animation can’t be called a master of CSS3. In fact, when you really learn CSS animation, you will be attracted by its charm, which can reduce the amount of code and improve performance.

This is a series of four articles.

Transition to CSS Animation by 2020

In 2020, master CSS animation thoroughly

By 2020, fully master CSS animation

Front-end in-depth CSS chapter I primary [transform], hand in hand with you to achieve 1024 programmer section animation

Transform translate is just a property of transform. Transform, translate, and transition are confusing for many beginners, so I’ll put them all together.

Without further ado, let’s learn today’s leading role transform with me.

The transform of grammar

value describe
none Definition does not transform.
translate(x,y) Define 2D transformations.
translate3d(x,y,z) Define 3D transformations.
translateX(x) Define the transformation, just using the X-axis values.
translateY(y) Define the transformation, just using the Y-axis value.
translateZ(z) Define the 3D transformation using only the z-axis values.
scale(x[,y]?) Define 2D scale transformations.
scale3d(x,y,z) Define the 3D zoom transformation.
scaleX(x) Define the scale transformation by setting the value of the X axis.
scaleY(y) Define the scale transformation by setting the Y-axis value.
scaleZ(z) Define the 3D scale transformation by setting the z-axis value.
rotate(angle) Define 2D rotation, specifying angles in parameters.
rotate3d(x,y,z,angle) Define 3D rotation.
rotateX(angle) Defines a 3D rotation along the X axis.
rotateY(angle) Define 3D rotation along the Y-axis.
rotateZ(angle) Define 3D rotation along the Z axis.
skew(x-angle,y-angle) Defines 2D skew conversions along the X and Y axes.
skewX(angle) Defines a 2D tilt transformation along the X axis.
skewY(angle) Define a 2D tilt transformation along the Y-axis.
perspective(n) Define perspective views for 3D transformation elements.

I’m going to transform. It seems that he has a lot of attributes, in fact, we often sum up the following four attributes.

  • The rotate (rotation)
  • Skew distortion ()
  • Scale (zoom)
  • Translate (mobile)

The rotate rotating

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    0%   {transform:rotate(0deg);}	
    100%   {transform:rotate(360deg);}
}
@keyframes rotateX{
    0%   {transform:rotateX(0deg);}	
    100%   {transform:rotateX(360deg);}
}
@keyframes rotateY{
    0%   {transform:rotateY(0deg);}	
    100%   {transform:rotateY(360deg);}
}

.rotate{
    animation:rotate 2s infinite linear;
}
.rotateX{
    animation:rotateX 2s infinite linear;
}
.rotateY{
    animation:rotateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>
Copy the code

Rotate, rotateX, rotateY. Represents rotation of a specified Angle on the plane, rotation of a specified Angle along the X-axis, and rotation of a specified Angle along the Y-axis.

Translate the mobile

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes translate{
    0%   {transform:translate(0px,0px);}	
    100%   {transform:translate(100px,100px);}
}
@keyframes translateX{
    0%   {transform:translateX(0px);}	
    100%   {transform:translateX(100px);}
}
@keyframes translateY{
    0%   {transform:translateY(0px);}	
    100%   {transform:translateY(100px);}
}

.translate{
    animation:translate 2s infinite linear;
}
.translateX{
    animation:translateX 2s infinite linear;
}
.translateY{
    animation:translateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="translate">
    <img src="./y.png" alt="" class="translateX">
    <img src="./y.png" alt="" class="translateY">
</body>
Copy the code

Translate (x,y), translateX(x), and translateY(y). Respectively represents the horizontal direction and vertical direction at the same time, only horizontal direction, only vertical direction movement.

Scale zooming

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes scale{
    0%   {transform:scale(0.1, 0.1); 100%} {transform:scale(1, 1); }} @keyframes scaleX{
    0%   {transform:scaleX(0.1);}	
    100%   {transform:scaleX(1);}
}
@keyframes scaleY{
    0%   {transform:scaleY(0.1);}	
    100%   {transform:scaleY(1);}
}

.scale{
    animation:scale 2s infinite linear;
}
.scaleX{
    animation:scaleX 2s infinite linear;
}
.scaleY{
    animation:scaleY 2s infinite linear;
}

</style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>
Copy the code

There are three properties of scale(x,y), scaleX(x), scaleY(y). Respectively represents horizontal and vertical direction at the same time, only horizontal direction, only vertical direction. But they have the same zoom center and cardinality, the center is the center of the element, the zoom base is 1, if its value is greater than 1, the element will be enlarged, and if its value is less than 1, the element will be shrunk.

Skew distortion

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    /* border-radius:50%; * /
}
@keyframes skew{
    0%   {transform:skew(0deg,0deg);}	
    100%   {transform:skew(25deg,25deg);}
}
@keyframes skewX{
    0%   {transform:skewX(0deg);}	
    100%   {transform:skewX(25deg);}
}
@keyframes skewY{
    0%   {transform:skewY(0deg);}	
    100%   {transform:skewY(25deg);}
}

.skew{
    animation:skew 2s infinite linear;
}
.skewX{
    animation:skewX 2s infinite linear;
}
.skewY{
    animation:skewY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>
Copy the code

Skew (x,y), Skew (x), and skewY(y). Respectively represents the horizontal direction and vertical direction at the same time, only horizontal direction distortion, only vertical direction distortion.

conclusion

Today we looked at the common properties of transform. You can see how simple they are. Rotate, skew, scale and translate represent transformations like the X and Y axes. Plus X or Y means it’s going to be deformed in that direction.

So far we have learned all the content of CSS3 animation together, the rest of the need for you to practice more, on other sites to see interesting animation to find a way to use CSS animation to achieve it, after you really practice, you will really master it, so you even do in 2020 master CSS animation!

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.

Front-end in-depth series is a pit series, which is an exploration and summary of the problems AND pits I have encountered in work and study. It is recorded and shared here, and also a reflection and questioning of my skills.

The front end road is diffuse, step pit ceaseless.

Front-end in-depth series continues to be updated…

More than 2019-10-30.