Transform Translate Transition If you’re new to CSS, you’ll sometimes be confused by the transform Translate Transition, because they look so similar. This article will introduce them in a short space to help you distinguish them better.

transform

Make… deformation

Property is used to rotate, scale, translate, or distort a given element by modifying the element’s coordinate space.

Method of use: transform: rotate | scale | skew | translate | matrix;

So when we need to do these things to elements, we need to use the transform property.

translate

Translate. Translate means translation, moving elements up, down, left, right along the coordinate axis

Transform: Translate (200px,50px); Move the element 200px to the right and 50px down from its original position

Note that the translate attribute needs to be used in the transform; translate is also the spatial position of the modified element.

transition

This property is used to animate elements, such as changing from 100 to 200 height:100px -> 200px. If there is no other property, this property can be used in a flash. So transition comes in handy.

Transition provides a way to control the speed of animations when changing CSS properties, making them a continuous process over a period of time.

Transition is very convenient for animations, but it also has its disadvantages. Animations do not support loops, so it is difficult for complex animations, so it is suitable for some simple transitions.

It has four values:

  • Transition-property: Specifies the properties used to generate the transition animation, such as width, height, color, etc., including the transform described above, as long as the value of the property is changeable and the initial state is clear.

  • Transition-duration: animation execution time

  • The transition – the timing – function: slow function, built the ease | linear | ease – in | ease – out | ease – in-out, easings.net/ on can choose oneself to like effect

  • Transition-delay: indicates the delay of execution

Three at a time

The effect of this CSS, using the three properties we just introduced, is that when the mouse moves over the element, it moves 100 pixels towards the X and y axes at a constant speed within 200 mm.

.translate:hover {
    transition: transform .2s ease;
    transform: translate(100px,100px);
}
Copy the code

Results the following

conclusion

Transform is used to change the coordinate space of an element, translate is used to move an element, transition animates the change.