animation动画效果 1002 css3

什么是动画

使用步骤

如何定义动画

@keyframes 动画名称{
	from{属性：值}
	percentage{属性：值}
	to{属性：值}
}

或者

@keyframes 动画名称{
	0%{属性名：属性值}
	进度值%{属性名：属性值}
	进度值2%{属性名：属性值}
	100%{属性名：属性值}
}

例子

例子

如何使用动画

简写

animation-name:调用动画的名称
animation-duration:秒数;

连写

animation: 动画名称 持续时间 动画模式 动画延迟 播放次数 动画方向 播放模式 

例子

例子

动画的属性

小结

动画的定义

我们需要指定不同阶段的不同效果

动画的使用

我们需要指定，用哪个动画，花多长时间执行完成这个动画

简写形式

例子

分开写的情况

连写

连写的注意