文章阅读大概需要五分钟,从动画基础原理,常用的动画制作,以及动画优化方面进行讲解
推荐一款动画设计工具
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