一、transform变换

1.1、translate（平移）

image.png

1.2、放大scale和旋转rotate

image.png

1.3、多属性变换

image.png

二、transition过渡

2.1、单属性缓慢过渡

image.png

2.2、多属性过渡

image.png

2.3、all所有属性过渡

image.png

2.4、结合transform使用

image.png

2.5、运动曲线和延迟

image.png image.png image.png

三、练习

3.1、缓慢顺时针旋转360放大1.2倍

image.png

3.2、图片缓慢放大不溢出

image.png

四、动画 animation

image.png image.png

五、动画循环播放

image.png