CSS 2D Transforms
https://www.w3schools.com/css/css3_2dtransforms.asp
CSS 3D Transforms
https://www.w3schools.com/css/css3_3dtransforms.asp
CSS Transitions
https://www.w3schools.com/css/css3_transitions.asp
CSS Animations
https://www.w3schools.com/css/css3_animations.asp
Reference from: https://ithelp.ithome.com.tw/articles/10200712
Transition, Animation differences, Transform three
| name | Introduction | Acting on |
|---|---|---|
Transition |
Based animation, transition animation emphasize a single CSS property | Usually between single CSS attribute changes |
Animation |
Details of complex animation effects, emphasizing the css property of processes and controls, can add keyframes | Various CSS properties change |
Transform |
Html rotation control element, zooming, movement, etc. | HTML elements (including content) change |
| name | Can operate on its own | Performance issues |
|---|---|---|
Transition |
✗, or pseudo-category needs to trigger events | Another independent thread processing, less affect performance |
Animation |
✔, enter the page can be run directly | Another independent thread processing, less affect performance |
Transform |
✔, enter the page can be run directly | HTML elements will operate due to operation, it is necessary to consider the effectiveness of |
- animation can be said to contain a number of transition control of the property, transition is roughly the CSS attribute changes, animation can be made part of more details
- can transform the property is deemed to use animation
- Causes and transform animation has to be run directly specified attribute "value" conversion, but no transition
Other Reference website:
https://adon988.logdown.com/posts/4729740-css3-animation-notes
https://ithelp.ithome.com.tw/articles/10197303
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://blog.csdn.net/yujin0213/article/details/79262825
https://www.oxxostudio.tw/articles/201502/css-bounce.html