css3 transition 和 Animation的区别

简述

css3 新增动画功能，使开发人员不用js或者flash就能实现页面的动态效果。css3提供两种实现动画效果的方式：transition，animation

• transition：控制元素从一个状态到另外一个状态之间的过渡
• animation：控制元素从包含多种状态的帧到帧之间的变化

transition

• 每个须要过渡的属性的两种状态都必须是明确的
• 能够简单的经过伪类 :hover, :focus, :active, :target触发
• 包含四种属性 transition-property（过渡的属性）, transition-duration（过渡的时间）, transition-timing-function（过渡的时间曲线）, transition-delay（过渡效果的开始时间）
• 全部有中间状态的属性才会有过渡效果
• 能够过渡的属性的值：color、length、visibility、font-size、z-index、number、font weight、percentage等

animation

• 弥补了transition不能一次控制多个属性的不足
• 使用@keyframes定义animation，其中包含animation名字，何任意的animation断点。 例如：

//动画定义，一个名叫slide的animation
@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
//动画触发，在class为ball的元素上触发slide动画，动画持续时间为两秒
.stage:hover .ball {
  animation: slide 2s linear;
}

• 其中0%和100%可用from和to代替
• animation 有四个属性，animation-name动画名字、animation-duration动画时长、animation- timing-function（动画的时间曲线）、animation-delay（动画延时）
• animation-iteration-count 控制动画重复的次数，其值可为一个整数或关键字infinite
• animation-direction 动画播放的方向可选normal、reverse、alternate、alternate-reverse
• animation-fill-mode 规定动画时间以外的状态
• animation-play-state 规定动画是否正在运行或暂停