CSS3中新加了一个功能------动画效果，使用的是animation。包含了六个属性，animation-name、animation-duration、animation-timing-function等。下面利用一个实例说明animation的用法，操作如下：
工具/原料
1
CSS3
2
HTML5
3
HBuilder
4
浏览器
5
截图工具
方法/步骤
1
第一步，打开HBuilder开发工具，新建静态页面animation.html，如下图所示：
2
第二步，在
插入一个div，设置id属性值为circle，如下图所示：3
第三步，编写div的样式，首先设置该div一个半径；圆形背景色为彩色，如下图所示：
4
第四步，保存代码预览静态页面，预览页面的效果，如下图所示：
5
第五步，再次添加三个圆形，添加这四个圆形的动画效果和透明度，如下图所示：
6
第六步，再次预览页面，查看四个圆形运行的效果图，如下图所示：
注意事项
1
注意CSS3动画的效果属性的用法
2
注意设置元素为圆形的方法
下一篇：CSS3日食动画