一、transform：需要结合translate、scale、rotate、skew四个函数使用
1. translate：平移
1) translateX：水平位移，属性值为像素值，如果是正数，表示向右，否则表示向左
2) translateY：垂直位移，属性值为像素值，如果是正数，表示向下，否则表示向上
3) 复合属性translate(值)，如果是一个值表示水平，如果是两个值，值和值用逗号分隔，第二个值表示垂直
2. scale：缩放，属性值数值，1表示不缩放，小于1表示缩小，大于1表示放大，简言之，属性值表示变化的倍数
1) scaleX：宽度的缩放
2) scaleY：高度的缩放
3) 复合属性scale（值），如果写一个值，该值表示宽度和高度，如果写两个值，第一个值表示宽度，第二个值表示高度
3. rotate：旋转，属性值为度数，格式transform：rotate(度数deg)，如transform：rotate(30deg)
4. skew：拉伸，格式shew（角度deg）
1) skewX：沿X轴拉伸
2) skewY：沿Y轴拉伸
3) 复合属性skew：格式为skew（值），如果写一个值，该值表示沿X轴拉伸，如果写两个值，那么第一个值表示沿X轴拉伸，第二个值表示沿Y轴拉伸
二、transform-origin：设置元素变形时的参照物，设置为left、center、right、top、center、bottom，也可以是像素值，格式transform-origin:水平的值 垂直的值
三、transition属性：设置元素的渐变效果（过渡效果）
1. transition-property：设置允许哪些属性可以有渐变的效果，属性值可以是CSS属性名称、all、none
2. transition-duration：设置渐变的时间，属性值为秒（如5s）或毫秒（如5000ms），如果省略，默认为0，1秒=1000毫秒
3. transition-timing-function：设置过渡方式
1) ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
2) linear：规定以相同速度开始至结束的过渡效果
3) ease-in：规定以慢速开始的过渡效果
4) ease-out：规定以慢速结束的过渡效果
5) ease-in-out：规定以慢速开始和结束的过渡效果
4. transition-delay：设置延迟时间，属性值为秒或毫秒
5. transition的复合属性，格式为：transition：property duration timing-funciton delay
四、animation：动画属性，使用时需要先创建动画帧
创建动画
@keyframes 动画名称{
动画执行时的不同阶段（可以用from和to表示，也可以用百分比表示）
}
例 @keyframes 动画名称{
from{
}
..
to{
}
应用动画
1. animation-name：设置动画名称
2. animation-duration：设置动画执行所需时间，属性值为秒或毫秒
3. animation-timing-function：规定动画的速度曲线，默认为ease，作用和transition-timing-function一样
4. animation-delay：设置动画延迟时间，属性值为秒或毫秒
5. animation-iteration-count：设置动画执行次数，属性值就是次数，如果写infinite表示无限次
6. animation-direction：设置动画方向，属性值为normal（正常）、alternate（反向），注意如果要有反向效果，那么次数必须是2次以上（包含2次）
7. animation复合属性，格式为：animation：name duration timing-function delay count direction