关键帧动画

animation和transition的区别

相同点:
都是随着时间改变元素的属性值。
不同点:
transition需要触发一个时间(hover事件或者click事件等)才会随着时间改变其CSS属性;而animation在不需要触发任何事件的情况下也可以显示的随着事件变化来改变元素CSS的属性值,从而达到动画效果,CSS3的animation就需要明确的动画属性值
关键帧动画_第1张图片

/* 声明动画*/
@keyframes mymove{
	/* 开始动画*/
	0%{
	width:200px;
	height:200px;
	background:red;
	}
	20%{
	width:300px;
	height:300px;
	background:yellow;
	}
	40%{
	width:400px;
	height:400px;
	background:yellow;
	}
	.....
}

你可能感兴趣的:(前端学习笔记,动画,css3,css)