css3动画

1.transition

transition直译为过渡，是一个简写属性，用于设置四个过渡属性

• • 
    
• transition-property 规定应用过渡属性的css属性名称。例：opacity
• transition-duration 规定完整过渡所需要花费的时间，以秒或毫秒记。例：3s
• transition-timing-function 规定过渡效果的速度曲线，默认值ease。linear：以相同的速度从开始至结束；ease：慢速开始，变快，慢速结束；ease-in：慢速开始；ease-out：慢速结束；ease-in-out：慢速开始和结束，比ease慢
• transition-delay 规定过渡效果延时多长时间开始。例：2s
  • 
    

2.animation

通过定义关键帧@keyframes来定义动作，然后animation完成多个动作

@keyframes animationname{   0% {   }   50% {   }         100% {   }       }

animationname就是定义动画的名称，用百分比来规定改变发生的时间，0%是动画开始的时间，100%是动画结束的时间，里面写css样式代码，然后通过animation调用，animation有6个属性：

• • 
    
• animation-name 动画名称
• animation-duration 动画耗时
• animation-timing-function 效果，默认ease 缓入缓出
• animation-delay 延时
• animation-iteration-count 循环次数 infinite 无限次播放
• animation-direction 正方或者倒放 normal 正常播放 alternate 倒放
  •