animation动画效果 1002 css3

animation动画效果 1002 css3

什么是动画

使用步骤

如何定义动画

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

或者

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

例子

例子

如何使用动画

简写

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

连写

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

例子

例子

动画的属性

小结

动画的定义

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

动画的使用

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

简写形式

例子

分开写的情况

连写

连写的注意

演练

动画属性 animation 1001 css - 知乎
https://zhuanlan.zhihu.com/p/260985557

演练 动画效果 animation 矩形变长又变短和四处乱串 1002 css3动画 - 知乎
https://zhuanlan.zhihu.com/p/261158068

更多详情

animation | CSS3 中文文档 | CSS中文手册 | CSS API 在线手册
http://css.cuishifeng.cn/animation.html