Parse the difference between transform, Transition and animation

1. transform

1.1 define

Transform is mainly used to transform elements, including rotate,scale,skew,translate and matrix.

Grammar:

transform: none | transform-functions

None indicates that no transformation is performed, and transform-functions indicates that a transformation function or a combination of multiple transformation functions can be performed.

.transform-multi:hover {transform: scale(1.2) rotate(30deg); }Copy the code

transform-originTransformation basis points

transform-origin: x-axis y-axis z-axis; Transform-origin is used to define the base point of transformation. By default, the base point of transformation is the center point of the element.

transform-styleDefines nested elements to be rendered in three dimensions

transform-style: flat|preserve-3d;

• flat: indicates that all child elements are rendered in a 2D plane
• preverse-3d: indicates that all child elements are rendered in 3D space

Effect:

1.2 Application Scenarios

A simple list of API uses would make people feel boring and meaningless. Below, I will practice some transform functions of Transform based on specific usage scenarios.

1. usetransitionandposition: absolute;Combined to achieve horizontal and vertical centering:

html:

<h2 style="padding-top: 20px;" </h2> <div class="transform-box"> <div class="middle-center"> <p> Horizontally centered </p> <p> Width and height are separated by child elements </p> </div> </div>Copy the code

css:

.transform-box {
  width: 200px;
  height: 200px;
  position: relative;
   background-color: #00f;
}
.middle-center {
   background-color: #f00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}
Copy the code

Effect:

2. Define magnification, rotation, tilting, matrix transformation and other interactive effects:

html:

<h2>scale, rotate, skew, martix</h2>
<div class="transform-box">
  <div class="white-container">
    <div class="gray-bg scale">
      <div class="blue-content"> 
      </div>
    </div>
    <p class="info-text">scale(2)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg rotate">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">rotate(45deg)</p>
  </div>
  <div class="white-container">
    <div class="gray-bg skew">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">skew(45deg)</p>
  </div>
  
  <div class="white-container">
    <div class="gray-bg matrix">
      <div class="blue-content">
        
      </div>
    </div>
    <p class="info-text">matrix(2, 2, 0, 2, 45, 0)</p>
  </div>
</div>
Copy the code

css:

.transform-box { display: flex; text-align: center; } .white-container { width: 200px; flex: 0 0 200px; margin-right: 20px; background: #f1f1f1; } .gray-bg { width: 100px; height: 100px; margin: 15px auto; background: #ddd; cursor: pointer; box-shadow: 0 0 5px #ccc inset; } .blue-content { width: 100px; height: 100px; position: relative; background: #03A9F4; opacity: .5; box-shadow: 0 0 5px #ccc; } .info-text { color: #555; }.scale:hover. Blue-content {-webkit-transform: scale(1.5, 1.5); The transform: scale (1.5, 1.5); } .rotate:hover .blue-content { -webkit-transform: rotate(45deg); transform: scale(45deg); } .skew:hover .blue-content { -webkit-transform: skew(45deg); transform: skew(45deg); } .matrix:hover .blue-content { -webkit-transform: matrix(2, 2, 0, 2, 45, 0); transform: matrix(2, 2, 0, 2, 45, 0); }Copy the code

Effect:

It is worth mentioning that if necessary, we can use matrix to make very complex matrix transformation. Interested students can study it: CSS3 Transform matrix

3. Use JS to dynamically changetransformTo achieve the animation transition effect:

Let’s take the dynamic effect of a falling ball as an example:

html:

</h2> <button class=" boll-bTN "id=" boll-bTN "> </button> <div class="boll" id="boll"></div>Copy the code

css:

.boll-btn {
  width: 100px;
  height: 30px;
  line-height: 28px;
  border: none;
  border-radius: 5px;
  color: #555;
  margin-bottom: 10px;
}
.boll {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03A9F4;
  transform: translateY(0px);
  margin-bottom: 300px;
}
Copy the code

js:

const domBoll = document.getElementById('boll')
document.getElementById('boll-btn').onclick=function() {
  let distance = 0
  let timer = setInterval(() => {
 
  if(distance >= 300) {
     clearInterval(timer)
     }  domBoll.style.transform = 'translateY('+ distance++ +'px)'
  }, 30)
}
Copy the code

Effect:

If necessary, you can use translate3D, Rotate3D and other apis to promote elements to the composition layer and enable hardware accelerated rendering. However, when enabling hardware accelerated rendering, the browser may blink or shake frequently. You can try the following methods:

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
Copy the code

2. transition

2.1 define

Grammar:

transition: property duration timing-function delay;

Used to define the transition effect of changes to a CSS property or multiple CSS properties.

Attribute Definition and usage instructions:

value	describe
transition-property	Specifies the name of the CSS property, and the transition effect: size, position, distortion, etc
transition-duration	Specifies how long (in seconds or milliseconds) it will take to complete the transition effect. The default value is 0, which means no effect.
transition-timing-function	Specifies the rotation speed curve for the transition effect
transition-delay	Define when the transition effect starts

transition-property:

Attribute values:

• None: No attribute gets the transition effect
• All: All attribute changes gain transition effects
• Property: Transitions are obtained for specific property changes, such as width, height,opacity, etc.

transition-timing-function:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

Attribute values:

• Cubic bezier(0,0,1,1); cubic bezier(0,0,1,1);
• Ease: specifies the transition effect of a slow start, then a faster, then a slow end (cubic- Bezier (0.25,0.1,0.25,1));
• Ease-in: specifies the transition effect starting at a slow speed (equal to cubic-bezier(0.42,0,1,1));
• Ease-out: specifies the transition effect ending at a slow speed (equal to cubic-bezier(0,0,0.58,1));
• Ease-in-out: specifies the transition effect of starting and ending at a slow speed (equal to cubic-bezier(0.42,0,0.58,1))
• Cubic – Bezier (n,n,n,n): Define its own value in the cubic- Bezier function. Possible values are between 0 and 1

2.2 Application Scenarios

1. To achieve the transition effect of the active state (width and transparency changes):

html:

<h2>transition: width&opacity</h2> <p class="transition-p">Copy the code

css:

.transition-p { width: 100px; height: 40px; Opacity: 0.6; border-radius: 10px; background: #03A9F4; text-align: center; line-height: 40px; color: #fff; The transition: 0.5 s ease - in all; }. Transition -p:hover {opacity: 1.0; width: 120px; }Copy the code

Effect:

2. Transition and Transform are combined to animate transitions

html:

</h2> <div class=" bolL1 "id=" bolL1 "></div>Copy the code

css:

.boll1 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03A9F4;
  transform: translateY(0px);
  margin-bottom: 300px;
  transition: all cubic-bezier(0.42,0,0.58,1) 2.0s 1.0s;
  cursor: pointer
}
.boll1:hover {
  transform: translateY(200px);
}
Copy the code

Effect:

Transition can be used for menu interaction, mouse zoom in and out, and ball drop. There are only two states of Transition, the beginning and the end. Usually only two states of a single animation interaction use transition.

3. animation

3.1 define

The animation is defined by @(-webkit-)keyframes to define the animation name and the behavior of the animation, and then the animation execution effect is defined by the animation properties.

Grammar:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

A series of animation transitions used to define multiple intermediate states.

Attribute Definition and usage instructions:

value	describe
animation-name	Specifies the name of the keyframe to bind to the selector
animation-duration	The gauge animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function	How will the set animation complete a cycle
animation-delay	Sets the delay interval before animation starts
animation-iteration-count	Defines the number of times an animation is played
animation-direction	Specifies whether the animation should take turns playing backwards
animation-fill-mode	Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing)
animation-play-state	Specifies whether the animation is running or paused
initial	Set the property to its default value,Read the introduction to Initial
inherit	Inheriting attributes from parent elements,Read about initInherital

Animation-name refers to the animation defined by @keyframes.

@keyframes:

@keyframes animationname {keyframes-selector {css-styles; }}

value	describe
animationname	Required, define the name of the animation
keyframes-selector	Required to define multiple intermediate states of the animation Legal values: 0-100% From (same as 0%) To (same as 100%)
css-styles	One or more required, valid CSS style properties

3.2 Application Scenarios

1. Define a loop that automatically executes the transition animation (remember the little flags in the Spring Festival Gala?).

html:

</h2> <div class="animation-infinite"> </div> </div>Copy the code

css:

.animation-container { position: relative; padding-bottom: 50px; } .animation-infinite { position: absolute; left: 0; top: 0; width: 100px; height: 50px; padding: 10px; background: #03A9F4; color: #fff; Animation: move - to - 2.0 s infinite right; Opacity: 0; opacity: 0; opacity: 0; opacity: 0; opacity: 0; width: 100px; left: 0; Opacity: 0; width: 120px; left: 40px; Opacity: 0; width: 150px; left: 80px; Opacity: 0.8; width: 120px; left: 40px; } 100% { opacity: 1; width: 100px; left: 0; }}Copy the code

Effect:

2. Defines serial execution of multiple animations

html:

</h2> <div class="animation-infinite1"> </div> </div>Copy the code

css:

.animation-container { position: relative; padding-bottom: 150px; } .animation-infinite1 { position: absolute; left: 0; top: 0; width: 100px; height: 50px; padding: 10px; background: #03A9F4; color: #fff; Animation: To-right 2.0s ease-in,to-bottom 1.0s ease-in 2.0s,to-left 2.0s ease-in 3.0s,to-top 2.0s ease-in 5.0s; } @keyframes to-right { 0% { top: 0; left: 0; } 100% { top: 0; left: 200px; } } @keyframes to-bottom { 0% { top: 0; left: 200px; } 100% { top: 100px; left: 200px; } } @keyframes to-left { 0% { top: 100px; left: 200px; } 100% { top: 100px; left: 0; } } @keyframes to-top { 0% { top: 100px; left: 0; } 100% { top: 0; left: 0; }}Copy the code

Effect:

Just like transform, we can define animation animation on a class, and then add the corresponding class to an element through JS operation, thus triggering the execution of animation. We can flexibly switch between multiple animations and control the execution times of animation.

conclusion

The difference between transform, Transition and animation

• Transform itself does not have transition effects. It only transforms elements into size, rotation, tilt, etc. By combining it with transition or animation, the transformation process can have the effect of animation. Usually, there is only one arrival state Animation can also be realized by setting timer through JS.
• Transition is a transition animation that defines when a single or multiple CSS properties, such as width,opacity, etc., change. The transition animation is executed when the CSS properties defined change. The animation, once defined, is automatically executed after the page loads.
• Animation Defines an animation that can be played a specified number of times or in an infinite loop.
• Transition defines only two animation states, the start state and the end state. Animation can define multiple intermediate animation states and control the orderly execution of multiple complex animations.

Ps: For the use of scenarios in this article, I only write out some of the scenarios THAT I will use in my daily work. Welcome to share some of your animation use scenarios in the comments section, for everyone to learn ~ sample source code address

Progress together, wish we can become a better self ~

Review past

• Why is single-page SEO unfriendly? How to solve this problem?
• Solid base series: JavaScript variables and data types
• Intensive reading source code series: Vue DOM asynchronous update and vue.nexttick () principle analysis
• Intensive reading source code series: front-end routing VUe-Router
• Solid foundation series: JavaScript class inheritance
• PostMessage is so useful
• Use SockJS to achieve webSocket communication in VUE