动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。
什么时候使用动画：
1.当显示或隐藏页面、弹出框或内容区域的时候；
2.当一些内容从页面的一个地方移动到其他地方的时候；
3.当页面中的一些内容，应用户的操作而产生状态改变的时候；
4.当一些内容在几种状态间转变的时候；
5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。
什么时候不应使用动画：
1.当某些操作是需要用户频繁重复操作的时候；
2.当设备无法充分显示动画效果的时候（也就是说该动画会占用计算机的很多资源，会影响到性能）；
3.即时操作。
当然这些规定都不是绝对的，你需要根据你的实际情况来决定是否使用动画。下面是一些checklist（验证列表），只要满足下面几条选项，你的动画就是有价值的。
1.动画是否适合你的目标客户；
2.动画是否实用；
3.动画是否增强了用户体验；
4.动画是否以合适的速度运行。
下面我们开始我们的第一个例子，创建一个动画加载指示器，我直接把源码贴出来，上面有注释。
复制代码 代码如下:
#loader
{
margin: 10px 0 0 36px;
}
#loader span
{
display: block;
width: 6px;
float: left;
margin-right: 6px;
border: 1px solid #336633;
position: relative;
background-color: #ccffcc;
}
#loader .bar-0
{
height: 15px;
bottom: -20px;
}
#loader .bar-1
{
height: 25px;
bottom: -10px;
}
#loader .bar-2
{
height: 35px;
margin-right: 0;
}
