有关animation的说明可参考：Mozilla docs:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_animations

如下有几个很炫的在线效果演示：

1. http://www.gbtags.com/gb/demoviewer/2199/8b77ed98-ad7f-4f08-8e3b-eb4f8d1acfa3/CSS3-loading-animation-loop%7Cindex.html.htm
2. http://www.gbtags.com/gb/demoviewer/2365/70f813e1-77ba-4816-9ac1-032c9fe0614d/index.html.htm

（http://www.gbtags.com/gb/tag/usertag/814.htm）

简短说明：

CSS3:

#test{

  width: 100%;

  height: 200px;

}

.fullwidth .expand {

  width: 100%;

  height: 1px;

  margin: 2px 0;

  background: #2187e7;

  position: absolute;

  box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);

  -moz-animation: fullexpand 10s ease-out;

  -webkit-animation: fullexpand 10s ease-out;

}

@-moz-keyframes fullexpand {

0%  { width:0px;}

100%{ width:100%;}

}

@-webkit-keyframes fullexpand {

0%  { width:0px;}

100%{ width:100%;}

}

HTML:

<div id="test" class="fullwidth">

    <div class="expand"></div>

  </div>