以上为特定的语法格式
name : 表示 动画名称，可自定义
time : 表示 动画持续的时间 比如 2S ,注意，“s”要大写
动画特性，具体参考css3手册，比如可放置，线性动动，或其它运动
outtime: 延迟时间 ，格式和time 一样
循环次数：可以是具体的数，不带单位，可以是无限循环，单词忘了，看手册
在.high-title h2 样式后面增加：-webkit-animation-delay:6s animation-delay:6s-webkit-animation-fill-mode: forwards animation-fill-mode: forwards opacity: 0完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { margin-left: 0pxmargin-top: 0pxmargin-right: 0pxmargin-bottom: 0px}
.high-title h3 { width: 756pxheight: 448pxoverflow: hiddenposition: absolutetop: 20pxleft: 50%margin-left: -328pxz-index: 2opacity: 0-webkit-transition: opacity .5s ease-in-out-moz-transition: opacity .5s ease-in-out-ms-transition: opacity .5s ease-in-outtransition: opacity .5s ease-in-out}
.high-title h3 { opacity: 1-webkit-animation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-outanimation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-out}
.high-title h2 { width: 756pxheight: 448pxoverflow: hiddenposition: absolutetop: 60pxleft: 50%margin-left: -328pxz-index: 2opacity: 0-webkit-transition: opacity .5s ease-in-out-moz-transition: opacity .5s ease-in-out-ms-transition: opacity .5s ease-in-outtransition: opacity .5s ease-in-out}
.high-title h2 { opacity: 1-webkit-animation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-outanimation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-out-webkit-animation-delay:6s animation-delay:6s-webkit-animation-fill-mode: forwards animation-fill-mode: forwards opacity: 0}
@-webkit-keyframes tmd{
0% {
opacity: 0
-webkit-transform: translateX(-20px)
}
100% {
opacity: 1
-webkit-transform: translateX(0)
}
}
@-moz-keyframes tmd {
0% {
opacity: 0
-moz-transform: translateX(-20px)
}
100% {
opacity: 1
-moz-transform: translateX(0)
}
}
@-o-keyframes tmd {
0% {
opacity: 0
-o-transform: translateX(-20px)
}
100% {
opacity: 1
-o-transform: translateX(0)
}
}
@keyframes tmd {
0% {
opacity: 0
transform: translateX(-20px)
}
100% {
opacity: 1
transform: translateX(0)
}
}
</style>
</head>
<body>
<div class="high-title"><h3>第一</h3><h2>第二</h2></div>
</body>
</html>
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
