HTML代码
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
<div class="wrapper">
<div class="load-bar">
<div class="load-bar-inner" data-loading="0"><span id="counter"></span></div>
</div>
<h1>Loading</h1>
<p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>
CSS样式表
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {
height: 99%
width: 0%
border-radius: inherit
position: relative
background: #c2d7ac
background: linear-gradient(#e0f6c8, #98ad84)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3)
animation: loader 10s linear infinite
}
运行效果：
之前如果想在自己的网站使用某些好看的字体，总是迫不得已得在PS里先把字体图片做好。虽然这样做也能达到我们想要的效果，但是这样就增加了HTTP请求（如果在多处使用的话），即使合并所有图片，也不好管理，灵活性不高，哪一天想换种更好看的字体，那工作量，想想都没劲！幸好CSS3新增了@font-face模块，可以帮助我们轻松解决Web页面中使用优雅字体的方式，而且我们可以根据需要自定义多种字体，但是每个@font-face只能定义一种，若需要多个字体就启用多个@font-face规则。@font-face 主要就是把自己想要的，或者自己定义的Web字体嵌入到Web页面中，然后这些字体就会被放置在服务器上，浏览器会根据指定的命令将对应的字体下载到本地缓存，使用它来修饰文本。也就是我们所说的Web字体嵌入。
@font-face 语法：
font-family : 其属性值指定的是自定义的字体名称，最好就是直接使用下载字体的默认文件名，然后需要将它引用到元素的font-family中。虽然自定义了自己想要的字体，但是也得在元素中使用它才有效果。【必选属性】
src : 其属性值指定自定义字体的存放路径，可以是相对路径或者绝对路径。format()指定的是自定义的字体格式，主要用来帮助浏览器识别，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等类型。【必选属性】
font-weight 和 font-style ：分别用来指定字体是否加粗和定义字体样式。当然还可以设置font-size等字体属性。【可选属性】
如果你说的是第一次不执行动画的话。那么问题就是第一次加在不到是你第一次是append在文档后面添加div，你第一次操作div不存在，当你添加出div，因为div是直接被显示出来，而你的open类是执行动画，你添加出div你的div是显示的，open类也是执行动画显示div，div已经显示出来了所以不会执行动画，而你后面的能执行因为div已经存在，他能正确的执行动画。如果要正确就是div直接写出来不要用js返回，或者用js去操作动画。我所理解的是这样，不知道对你有帮助不。
