css3动画，过渡，变形

animation动画
用于设置动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

• animation-name 动画名称

• animation-duration 动画指定需要多少秒或毫秒完成
  值：time 默认值为 0，意味着没有动画效果

• animation-timing-function 设置动画如何完成一个周期
  值：
  ①linear 匀速
  ②ease 先慢后快，结束前变慢 默认
  ③ease-in 低速开始
  ④ ease-out 低速结束
  ⑤ease-in-out 低速开始和结束
  ⑥liucubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

• animation-delay 动画在启动前的延迟间隔
  值：time 默认值为 0

• animation-iteration-count 动画的播放次数
  值：
  ①n 一个数字，定义播放多少次动画 默认值1
  ②infinite 动画无限次播放

• animation-direction 是否轮流反向播放动画
  值：
  ①normal 正常
  ②reverse 反向播放
  ③alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
  ④alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

• animation-fill-mode 当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态

• 值：
  ①none 默认，播放完动画后，画面停在起始位置
  ②forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
  ③backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
  ④both 设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

• animation-play-state 动画是否正在运行或已暂停
  值：
  ①paused 指定暂停动画
  ②running 指定正在运行的动画，默认
  ③initial 设置属性为其默认值
  ④inherit 从父元素继承属性

css3关键帧
关键帧将保存元素在特定时间的样式

@keyframes规则

当你在@keyframes规则中指定css样式时,动画将在某些时间从当前样式逐渐变为新样式.

要使动画起作用,必须将动画绑定到元素.

以下例子,将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时.

@keyframes animation-name{ 
    0% {background-color:red;} 
    50% {background-color:yellow;} 
    70% {background-color:green;}
    100% {background-color:green;}
 }

animation-name是为动画指定的名字,你可以设置成任意的名字.

作为百分比的替代方法,可以使用from和to关键字分别代替0%起始点,100%结束点.

要使动画起作用,必须将动画绑定到元素.

过渡transition

• transition-property：指定过渡的CSS属性。
  none：没有指定任何样式。
  all：默认值，表示指定元素所有支持transition-property属性的样式。<property>：指定一个或多个样式，用‘，’隔开。
• transition-duration：指定完成过渡所需的时间。秒或毫秒为单位
• transition-timing-function：指定过渡调速函数。
  值：
  ①ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。
  ②linear：元素样式从初始状态过渡到终止状态速度是恒速。
  ③ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。这种效果称为渐显效果。
  ④ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。这种效果称为渐隐效果。
  ⑤ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果。
• transition -delay：指定过渡开始出现的延迟时间。秒或毫秒为单位

变换transform

通过 CSS3 变换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate() 长度值或者百分比 在水平方向上、垂直方向上平移元素
rotate()
rotateX(a)、rotateY(a)、rotateZ(a)分别是设置绕X、Y、Z轴的旋转。
translate3d(x,y,z)
可以和rotate()函数结合使用的是transform-origin: center;
transform-origin:x y z;属性必须与transform属性一起使用，指定旋转变换的点，默认在元素的中心
transform-origin 在二维时有两个方向的在属性值。可能的值：left、center、right、length、%。

scale()

scale() CSS 函数可改变元素的大小。 它可以增大或减小元素的大小。
　　scale()函数是scaleX()和scaleY()简写。当scale()函数只指定一个参数的时候，X、Y方向上共享整个参数。
　　scaleZ(z),scale3d(x,y,z)

skew()
倾斜：改变元素在页面当中的形状
skewX(ndeg)
x轴方向倾斜，改变的是y轴的度数
n取值为正，y顺时针倾斜
n取值为负，y逆时针倾斜
skewY(ndeg)，skew(x)，skew(x,y)