css动画基础

文章阅读大概需要五分钟，从动画基础原理，常用的动画制作，以及动画优化方面进行讲解

推荐一款动画设计工具

https://www.w3cways.com/css3-animation-tool

矩阵变换

在css中矩阵变换主要包括
transfrom: matrix3d(a00, a10, a20, a30, a01, a11, a21, a31, a02, a12, a22, a32, a03, a13, a23, a33)
和transfrom: matrix3d(a,b,c,d,e,f）来进行计算矩阵的3d以及2d变换。

上面是四阶单位阵，作为计算的初始位置。
通过修改
对应的值可以得到xyz三个坐标轴的伸缩平移变换量。

当我我们手写css动画或者生成动画时我们为了提高效率会直接使用常用的样式api

.animation{      
      transform: rotate(50deg) scaleX(1.1);
}
.done{        
    -webkit-transition-property:all;
    -webkit-transition-duration:0.5;
    -webkit-transition-delay:0;
    -webkit-transition-timing-function:ease;
}

如果对特殊角度有要求可以在下面网站进行转换

http://ds-overdesign.com/transform/matrix.html