动画与变形

1、2D变换—transform
基本属性值
transform属性用于实现平移、缩放、旋转和倾斜等2D变换；transform-origin属性用于设置中心点的变换
transform可以被指定多个属性值，用空格分隔
旋转
应用transform属性的rotate(<angle>)函数可实现2D旋转
参数<angle>用于置顶旋转的角度
缩放
应用transform属性的scale(<number>[,<number>])——在X、Y轴上同时缩放、scaleX(<number>)、scaleY(<number>)函数实现缩放
平移
应用transform属性的translate(<length>[,<length>])——在X、Y轴上同时平移、translateX(<length>)、translateY(<length>)函数实现2D平移
倾斜
应用transform属性的skew(<angle>[,<angle>])——在X、Y轴上同时倾斜、skewX(<angle>)、skewY(<angle>)函数实现倾斜
变换中心点
transform-origin属性
若是两个参数，分别是横纵坐标；若是一个，则是横坐标，纵坐标默认50%
2、过渡效果—transition
指定参与过渡的属性
transition-property：all | none | <property>[,<property>]
all：默认值，表示所有可以进行过渡的CSS属性
none：表示不指定过渡的CSS属性
<property>：表示指定要进行过渡的CSS属性，可以同时指定锁哥属性值，用逗号分隔
指定过渡的持续时间
transition-duration：<time>[,<time>]
<time>：用于指定过渡的持续时间，默认值是0，可以同时指定锁哥属性值，用逗号分隔
指定过渡的延迟时间
transition-delay：<time>[,<time>]
<time>：用于指定过渡的延迟时间，默认值是0，可以同时指定锁哥属性值，用逗号分隔
指定过渡的动画类型：transition-timing-function
3、动画—Animation
关键帧
定义关键帧：
@keyframes name ' { ' <keyframes-blocks> ' } ';
name：定义一个动画名称，该动画名称将被animation-name属性所使用
<keyframes-blocks>：定义动画在不同时间段的样式规则——from、to
动画属性
animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode