CSS3动画属性总结

动画的分类：

CSS3中的动画分为：transform（平移动画）、transition（过渡动画）animation (帧动画）三种。

• 平移动画属性：transform有如下属性:
  1、平移属性：translate
  2、旋转属性：rotate
  3、缩放属性：scale
  4、倾斜属性：skew
  一、平移属性注意点：
  1、可以写单独设置X/Y/Z的位移:
  transform:translateX(参数);
  transform:translateY(参数);
  也可以综合写transform：（Xpx，Ypx）
  2、参数的设置:如果是正值的情况下：往右往下 负值：往左往上
  二、旋转属性注意点：
  1、旋转属性其旋转的是一个度数 deg
  默认情况下：是以中心点进行转动
  单独设置围绕某个轴（X Y）
  transform:rotateX()
  transform:rotateY()
  2、旋转属性可以跟平移属性一起写：平移属性一定要写在旋转属性之前
  例如：transform:translateX(80px) rotate(360deg)
  三、缩放属性注意点：
  1、 transform:scale(参数1，参数2); （0 - 0.999999 缩小 大于1 放大）
  参数1：X轴缩放的比例
  参数2：Y轴缩放的比例
  可以单独设置X Y
  transform:scaleX()
  transform:scaleY()
  2、如果两个参数相同的情况下 直接写一个。 例如：transform:scale（1）
  四、倾斜属性注意点：
  1、倾斜属性其倾斜的是一个度数 deg
  transform:skew(); deg
  transform:skewX()
  transform:skewY()
  2、相对上面三个属性该属性相对运用较少。

• 过渡动画属性：transition属性:
  transition这是一个复合属性，包括：
  transition-property:过渡属性；
  transition-delay：过渡延时；
  transition-duration：过渡时间；
  transition-timing-function：过渡方式
  过渡方式有以下属性值（linear匀速播放、ease-in-out以低速开始和结束、ease-in以低速开始、ease-out低速结束、ease默认，以低速开始，然后加快，在结束前变慢。 ）
  //注：如果写复合属性，当出现两个时间，则第一个为动画时间，第二个表示延时时间；如果只有一个时间，则表示的时动画时间。

• 自定义动画(帧动画）animation这是一个复合属性，必须与规则@keyframes配合使用。
  eg:@keyframes mymove{} animation-name:mymove;
  animation包含以下属性：
  一、animation-duration
  1、检索或设置对象动画的持续时间
  2、 说明：animation-duration:3s; 动画完成使用的时间为3s
  二、 animation-timing-function
  1、检索或设置对象动画的过渡类型
  2、属性值
  linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  step-start:马上跳到动画每一结束桢的状态
  三、 animation-delay
  1、检索或设置对象动画延迟的时间
  2、说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
  四、animation-iteration-count
  1、检索或设置对象动画的循环次数
  2、 属性值
  animation-iteration-count: infinite | number;
  infinite：无限循环
  number: 循环的次数
  五、animation-direction
  1、检索或设置对象动画在循环中是否反向运动
  2、属性值
  normal：正常方向
  reverse：反方向运行
  alternate：动画先正常运行再反方向运行，并持续交替运行
  alternate-reverse：动画先反运行再正方向运行，并持续交替运行
  六、animation-play-state
  1、检索或设置对象动画的状态
  2、属性值
  animation-play-state:running | paused;
  running:运动
  paused: 暂停
  animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

注意点：
1、大多数会用：animation: 动画名称 时间 运动方式
2、不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
3、关键帧的两种写法
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
数值段必须是百分数，如果不是百分数，这个keyframes是无效的，不会起任何作用。keyframes的单位只接受百分比值。