一、什么是动画？

动画就是一帧又一帧图片,按顺序展现在人的眼前，但是由于人的视觉反应不过来就会产生图画动起来的效果。

二、动画动作

1.动画的声明@keyframes name

动画声明需要使用@keyframes name,后面的name是人为定义的动画名称

 @keyframes move {     0% {         transform: translate(0, 0);     }     25% {         transform: translate(1000px, 0px);     }     50% {         transform: translate(1000px, 400px);     }     75% {         transform: translate(0px, 400px);     }     100% {         transform: translate(0, 0);     } }

2.动画的动作

在以上代码中,{}内包含的就是动画的动作,每一个完整的动画都会一定的时间，其中

意思是每达到时间的百分之多少就向某状态进行转变。

三、动画属性

1.代码示例

2.效果展示

四、项目案例

1.奔跑的小熊

2.城市热点图

小熊奔跑,背景及小熊:

到此这篇关于 CSS中实现动画效果-附案例的文章就介绍到这了,更多相关 CSS中实现动画效果内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！