css3中的动画属性

css3样式
 兼容前缀
 正常样式：teansform
 前缀写法
 -o-teansform  //opear
 -ms-teansform //ie
 -moz-teansform  //firfox
 -webkit-teansform  //chorme

 正规写法：
 teansform
  -o-teansform  //opear
 -ms-teansform //ie
 -moz-teansform  //firfox
 -webkit-teansform  //chorme

1 透明度
  透明度：rbga()  0完全透明 1不透明
  不透明度:opacity:0.3   0完全透明 1不透明
2 text-overflow 规定当文本溢出盒子后如何显示
  clip 剪切文本
  ellipsis  显示省略符号(....)
  注意需要配合以下两个样式使用：
  1 overflow：hidden
  2 white-space:nowrap     //元素内的空白区域如何处理 即文本不换行

5 渐变：
  线性渐变：向上/向下/对角方向
  径向渐变：有中心向四周扩散（圆）
  linear-gradient  线性渐变
  background: linear-gradient(to right,red,blue)
  radial-gradient  径向渐变  默认是椭圆形状   cricle圆形

转型：
 transform
旋转：
 2D：rotate
 3D：rotateX rotateY  后面加单位deg/角度
  写法：
  transform:rotate(180deg)

移动：
 translate
 写法：
 transform：translate(x,y)
 transform：translate(100px,200px)
 transform：translateX(100px)

 缩放：
 scale(1.2) 1.2倍 0.5     缩小0.5倍

改变锚点：
  transform-origin:left;
  transform-origin:0% 0%;

动画：
  定义动画： 
  @keyframes name{
    form{}
    to{}
  }
  @keyframes name{
    0%()
    10%()
    100%()
  }
 animation-name：; 调用动画名称  必填
 animation-duration:2s 动画时间  必填
 animation-timing-function: ;定义速度曲线
  值： ease 默认值  动画以最低速开始 加快 在以最低速结束
  linear   速度相同
  esse-in  低速开始
  ease-out  低速结束
  ease-in-out  低速开始和结束
 
 animation-delay  延迟执行 单位 s
 animation-iteration-count  播放次数
  值：
  n      次数
  infinte  无限次

animation-duration   播放周期
  值：
  normal  默认值   正常播放
  reverse  反向播放
  alternate  奇数正向 偶数反向
  alternate-reverse 奇数反向 偶数正向

  animation-paly-state    动画的运行和暂停
  值：
  running   默认值  运行
  paused     暂停