@keyframes

Doctype不存在或错误，浏览器默认 混杂模式
$(‘#wrapper’).children(); //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。
要运用css3动画，需要运用@keyframes规则和animation属性

keyframes 关键帧

和 transition 属性相比的优点是能够更加精细地设置动画效果：
使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。

语法：

@keyframes animationname {keyframes-selector {css-styles;}}

1.animationname:声明动画的名称。

2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 “from” 和 “to”的形式。（建议始终使用百分比形式）

animation

animation-name ：检索或设置对象所应用的动画名称
animation-duration ： 检索或设置对象动画的持续时间
animation-timing-function ： 检索或设置对象动画的过渡类型
(ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。)
animation-delay ： 检索或设置对象动画延迟的时间
animation-direction:
(normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行)
animation-iteration-count: (infinite：无限循环)

transform

动画时间轴

animation-delay 最常见的是用于将动画与其他动画的执行时机错开，将动画落到不同的时间点，形成动画时间轴。

序列动画