2D的动画效果

• 动画过渡效果
• 2d动画效果位移
• 2d动画效果旋转
• 2d动画效果缩放

动画过渡效果

transition:all .3s，默认效果，动画过渡效果为.3s，哪个元素使用就给哪个元素添加。

动画的过渡方式，是匀速运动还是加速，减速运动，transition-timing-function：

ease（默认值）慢速开始，然后加速在减速；linear 匀速运动；ease-in 加速运动；ease-out 减速运动；

属性：cubic-bezier（）指定时序函数；(很麻烦，也不常用)

动画效果延时，等待相应时间以后执行过渡，transition-delay：时间名词

2d动画效果位移

transform: translate(100px,100px);x轴和y轴移动距离

translate（x轴，y轴）

translateX（）单独设置x轴的距离，translateY（）单独设置y轴的距离，同时设置两个轴的时候，如果一个轴为零，另外一个轴也不会显示

2d动画效果旋转

transform: rotate（），只设置一个值，正值顺时针旋转，负值逆时针旋转

rotate（）单位deg代表多少度，turn代表圈数，grad梯度（不常用，100grad约等于90deg）

transform:origin: X轴定位 Y轴定位，改变旋转的基点

X定义x轴的位置，left，center，right，lenght，%，px

Y定义y轴的位置，left，center，right，lenght，%，px

2d动画效果缩放

transfrom：rotate（x，y），缩放效果

X为x轴的缩放倍数

Y为y轴的缩放倍数

缩放为元素的中心点，进行缩放