CSS3——过渡与动画

1、transition过渡

将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

• transition——属性名 持续时间 过渡方法
• transition-property —— 属性名|all，即对哪个属性进行变化
• transition-duration —— 持续时间   
• transition-timing-function —— 过渡使用的方法（函数）                                                                                                             其取值有linear（匀速）、ease（慢快慢）、ease-in（慢快）、ease-out（快慢）、ease-in-out（慢快慢）

	


	
你今天开心吗

 2、animation动画

很多个状态完成过渡，定义动画（使用@keyframes）——调用动画

• animation——名称 时间 方式
• animation-name——引用@keyframes动画的名称
• animation-duration——动画完成时间
• animation-timing-function——规定动画的速度曲线，默认是“ease”
• animation-play-state——表示动画当前播放状态，取值为running|paused

@keyframes mybgcolor{   //定义动画，设置了如下4个关键帧
	0%{background-color: red}
	30%{background-color: yellow}
	60%{background-color: orange}
	100%{background-color: white}
}
div:hover{   //调用动画
	animation: mybgcolor 5s linear;
}