css3

image.png

  1. transform: 
  2.   rotate()
  3.   scale()
  4.   translate()
  5.   skew()
  6.   matrix()
  8. transition:all 5s ease 1s
  9.     transition-property: all;
  10.   transition-duration:5s;
  11.   transition-timing-function:ease;
  12.   transition-delay:1s;

动画
image.png

我们把动画想象为编织剧本，动画的每个阶段比作演员：准备-动作1-动作2-…-动作n-退场
image.png

拆解动作，准备剧本：
image.png

需要退场的时候 使用js监听动画的’transitionEnd’事件
image.png

下面来分析一个带有嵌套动画的css动画，以此来建立使用css动画编写剧本的意识
demo：https://tgideas.qq.com/book/danceonfingers/chapter2/section1/css3_1.html
image.pngimage.png image.pngimage.pngimage.pngimage.png

黑盒和灰盒两个不同的运动轨迹，可以理解为css嵌套动画，父元素和子元素有自己的流程

image.png

image.png 黑色
image.png 灰色

方法论 这种编写动画的思维方式挺好的；

帧动画

canvas

svg

threejs