CSS3变形：
transform:取值;
平移：translate()
- transform:translateX(x);沿x轴方向平移
- transform:translateY(y);沿y轴方向平移
- transform:translate(x,y)沿x轴和y轴方向同时平移
缩放：scale()
- transform：scaleX(x);沿x轴方向缩放
- transform：scaleY(y);沿y轴方向缩放
- transform：scale(x,y)沿x轴和y轴方向缩放
注意当x或y取值为0~1，元素进行缩小；当x或y取值大于1时；元素进行放大
倾斜：skew()
- transform:skew(x);沿x轴方向倾斜
- transform:skew(y);沿y轴方向倾斜
- transform:skew(x,y);沿x轴和y轴同时倾斜
说明：单位为deg（即degree的缩写）
旋转：rotate()
- transform:rotate(angle);
说明：单位为deg（即degree的缩写）
中心原点：transform-origin:取值;
- 百分比
- 关键字
CSS过渡 ：transition
谁过渡就给谁添加
1.transtion-property：对元素的哪一个属性进行操作
2.transition-duration：过渡的持续时间,单位秒（s/ms）
3.transition-timing-function：过渡的速率变化方式
linear：以匀速过渡。
ease：慢速开始，中间快速，以慢速结束。
ease-in：慢速开始。
ease-out：慢速结束。
ease-in-out：以慢速开始和结束。
除了这些外，还可以使用贝塞尔曲线来自定义
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值，cubic-bezier参数的取值范围： x y x y
4.transition-delay: 指定延迟时间
复合写法：transition: transition-property transition-duration transition-timing-function transition-delay;
css动画：animation
在使用animation属性实现动画需要两步
定义动画
调用动画
语法：
animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向
@keyframes：
@keyframes 动画名
{
0%{}
...
100%{}
}说明：0%表示动画的开始，100%表示动画的结束，0%和100%是必须的。
在使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比，此时0%和100%可以使用关键字from和to来代替,其中0%对应from，100%对应to
@keyframes mycolor
{
from{color:red;}
to{color:green;}
}动画名称：animation-name
对哪个css属性操作
持续时间：animation-duration
动画的持续时间
动画方式：animation-timing-function
linear：以匀速过渡。
ease：慢速开始，中间快速，以慢速结束。
ease-in：慢速开始。
ease-out：慢速结束。
ease-in-out：以慢速开始和结束。
延迟时间：animation-delay
单位秒（s/ms）
播放次数：animation-iteration-count
属性取值有两种，一种是“正整数”，另一种是“infinite”。当取值为n(正整数)时，表示动画播放n次，当动画取值为infinite时，表示动画播放无数次，也就是循环播放
播放方向：animation-direction
取值有3个
normal，正方向播放(默认)
reverse 反方向播放
alternate，播放次数是奇数时，动画正方向播放，播放次数是偶数时，动画反方向播放
播放状态：animation-play-state
取值属性有两个
running，播放（默认）
paused，暂停
最后：我会继续努力的大家一起加油