癫狂的dom——利用css3让dom动起来

不废话，先来看一下效果：

我的名字在颤抖！

下面上代码：

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link href="shake.css" rel="stylesheet" type="text/css" />
</head>
<body><span class="shake" style="margin: 40px;">李庆</span>
</body>
</html>

css部分：

/* shake **/
.shake{display: inline-block;/* -webkit-transform-origin: center center; */-ms-transform-origin: center center;/* transform-origin: center center; *//* -webkit-animation-name: shake-slow; */-ms-animation-name: shake-slow;animation-name: shake-slow;-webkit-animation-duration: 5s;-ms-animation-duration: 5s;/* animation-duration: 5s; *//* -webkit-animation-iteration-count: infinite; */-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-ms-animation-timing-function: ease-in-out;/* animation-timing-function: ease-in-out; *//* -webkit-animation-delay: 0s; */-ms-animation-delay: 0s;/* animation-delay: 0s; *//* -webkit-animation-play-state: running; */-ms-animation-play-state: running;/* animation-play-state: running; */
}@-webkit-keyframes shake-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }2% { -webkit-transform: translate(-1px, 3px) rotate(-1.5deg); }4% { -webkit-transform: translate(-4px, 5px) rotate(-1.5deg); }6% { -webkit-transform: translate(-1px, 6px) rotate(-0.5deg); }8% { -webkit-transform: translate(5px, -4px) rotate(-3.5deg); }10% { -webkit-transform: translate(-7px, -3px) rotate(-3.5deg); }12% { -webkit-transform: translate(-1px, 8px) rotate(2.5deg); }14% { -webkit-transform: translate(3px, -5px) rotate(-1.5deg); }16% { -webkit-transform: translate(1px, 0px) rotate(2.5deg); }18% { -webkit-transform: translate(-6px, -10px) rotate(-0.5deg); }20% { -webkit-transform: translate(3px, -2px) rotate(1.5deg); }22% { -webkit-transform: translate(0px, 0px) rotate(-2.5deg); }24% { -webkit-transform: translate(-5px, -4px) rotate(1.5deg); }26% { -webkit-transform: translate(-1px, 3px) rotate(-3.5deg); }28% { -webkit-transform: translate(1px, 1px) rotate(-3.5deg); }30% { -webkit-transform: translate(-4px, 8px) rotate(1.5deg); }32% { -webkit-transform: translate(-9px, 7px) rotate(-3.5deg); }34% { -webkit-transform: translate(4px, -9px) rotate(-2.5deg); }36% { -webkit-transform: translate(1px, -6px) rotate(-2.5deg); }38% { -webkit-transform: translate(-4px, 0px) rotate(-2.5deg); }40% { -webkit-transform: translate(3px, -7px) rotate(0.5deg); }42% { -webkit-transform: translate(4px, 4px) rotate(-0.5deg); }44% { -webkit-transform: translate(8px, -4px) rotate(-2.5deg); }46% { -webkit-transform: translate(9px, 9px) rotate(-3.5deg); }48% { -webkit-transform: translate(6px, -8px) rotate(-0.5deg); }50% { -webkit-transform: translate(-1px, 4px) rotate(-3.5deg); }52% { -webkit-transform: translate(4px, 6px) rotate(-1.5deg); }54% { -webkit-transform: translate(9px, -3px) rotate(2.5deg); }56% { -webkit-transform: translate(8px, -2px) rotate(-3.5deg); }58% { -webkit-transform: translate(-2px, -9px) rotate(-0.5deg); }60% { -webkit-transform: translate(-1px, -5px) rotate(2.5deg); }62% { -webkit-transform: translate(-8px, 3px) rotate(2.5deg); }64% { -webkit-transform: translate(6px, -2px) rotate(-3.5deg); }66% { -webkit-transform: translate(-5px, 9px) rotate(-1.5deg); }68% { -webkit-transform: translate(3px, 1px) rotate(-0.5deg); }70% { -webkit-transform: translate(6px, 4px) rotate(-1.5deg); }72% { -webkit-transform: translate(-6px, -5px) rotate(1.5deg); }74% { -webkit-transform: translate(-8px, 0px) rotate(-0.5deg); }76% { -webkit-transform: translate(-5px, -8px) rotate(1.5deg); }78% { -webkit-transform: translate(5px, -3px) rotate(-1.5deg); }80% { -webkit-transform: translate(-6px, -3px) rotate(-1.5deg); }82% { -webkit-transform: translate(7px, 8px) rotate(-1.5deg); }84% { -webkit-transform: translate(-6px, 9px) rotate(0.5deg); }86% { -webkit-transform: translate(1px, 8px) rotate(-3.5deg); }88% { -webkit-transform: translate(-9px, -2px) rotate(1.5deg); }90% { -webkit-transform: translate(4px, -6px) rotate(-1.5deg); }92% { -webkit-transform: translate(0px, -1px) rotate(0.5deg); }94% { -webkit-transform: translate(2px, -9px) rotate(2.5deg); }96% { -webkit-transform: translate(-9px, 1px) rotate(-2.5deg); }98% { -webkit-transform: translate(-9px, -5px) rotate(-3.5deg); } }@-ms-keyframes shake-slow { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }2% { -ms-transform: translate(-10px, 5px) rotate(-2.5deg); }4% { -ms-transform: translate(7px, 7px) rotate(-3.5deg); }6% { -ms-transform: translate(8px, -7px) rotate(-2.5deg); }8% { -ms-transform: translate(-8px, 3px) rotate(-0.5deg); }10% { -ms-transform: translate(3px, -10px) rotate(-1.5deg); }12% { -ms-transform: translate(-9px, -6px) rotate(2.5deg); }14% { -ms-transform: translate(-2px, -6px) rotate(-0.5deg); }16% { -ms-transform: translate(6px, -1px) rotate(0.5deg); }18% { -ms-transform: translate(5px, -1px) rotate(0.5deg); }20% { -ms-transform: translate(7px, -5px) rotate(-0.5deg); }22% { -ms-transform: translate(-8px, 5px) rotate(2.5deg); }24% { -ms-transform: translate(0px, 4px) rotate(2.5deg); }26% { -ms-transform: translate(-1px, 2px) rotate(-1.5deg); }28% { -ms-transform: translate(-1px, -1px) rotate(1.5deg); }30% { -ms-transform: translate(-5px, -5px) rotate(2.5deg); }32% { -ms-transform: translate(0px, 7px) rotate(-0.5deg); }34% { -ms-transform: translate(-9px, 3px) rotate(-0.5deg); }36% { -ms-transform: translate(3px, -5px) rotate(-2.5deg); }38% { -ms-transform: translate(5px, 2px) rotate(-0.5deg); }40% { -ms-transform: translate(6px, -3px) rotate(0.5deg); }42% { -ms-transform: translate(-4px, -6px) rotate(-0.5deg); }44% { -ms-transform: translate(9px, 2px) rotate(-3.5deg); }46% { -ms-transform: translate(6px, -4px) rotate(1.5deg); }48% { -ms-transform: translate(6px, 5px) rotate(2.5deg); }50% { -ms-transform: translate(-9px, -2px) rotate(-2.5deg); }52% { -ms-transform: translate(-7px, 9px) rotate(-0.5deg); }54% { -ms-transform: translate(-5px, -5px) rotate(-3.5deg); }56% { -ms-transform: translate(-6px, -10px) rotate(1.5deg); }58% { -ms-transform: translate(-3px, 1px) rotate(-3.5deg); }60% { -ms-transform: translate(3px, 5px) rotate(2.5deg); }62% { -ms-transform: translate(-1px, -8px) rotate(2.5deg); }64% { -ms-transform: translate(6px, -7px) rotate(-0.5deg); }66% { -ms-transform: translate(-7px, -1px) rotate(0.5deg); }68% { -ms-transform: translate(-3px, -4px) rotate(-1.5deg); }70% { -ms-transform: translate(-10px, 9px) rotate(2.5deg); }72% { -ms-transform: translate(9px, 9px) rotate(2.5deg); }74% { -ms-transform: translate(-6px, 8px) rotate(-0.5deg); }76% { -ms-transform: translate(-5px, -10px) rotate(-2.5deg); }78% { -ms-transform: translate(-7px, -9px) rotate(-0.5deg); }80% { -ms-transform: translate(8px, -4px) rotate(2.5deg); }82% { -ms-transform: translate(9px, 4px) rotate(-0.5deg); }84% { -ms-transform: translate(-1px, -1px) rotate(2.5deg); }86% { -ms-transform: translate(-6px, -3px) rotate(0.5deg); }88% { -ms-transform: translate(-2px, -4px) rotate(0.5deg); }90% { -ms-transform: translate(5px, 1px) rotate(0.5deg); }92% { -ms-transform: translate(1px, 2px) rotate(-3.5deg); }94% { -ms-transform: translate(-5px, -10px) rotate(1.5deg); }96% { -ms-transform: translate(-6px, 3px) rotate(-3.5deg); }98% { -ms-transform: translate(-1px, -7px) rotate(-2.5deg); } }@keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); }2% { transform: translate(6px, -7px) rotate(2.5deg); }4% { transform: translate(8px, -8px) rotate(2.5deg); }6% { transform: translate(1px, -8px) rotate(-3.5deg); }8% { transform: translate(-3px, 4px) rotate(-0.5deg); }10% { transform: translate(0px, -3px) rotate(1.5deg); }12% { transform: translate(-1px, 2px) rotate(0.5deg); }14% { transform: translate(6px, 6px) rotate(-1.5deg); }16% { transform: translate(-7px, 4px) rotate(-0.5deg); }18% { transform: translate(7px, 8px) rotate(-3.5deg); }20% { transform: translate(-6px, 2px) rotate(1.5deg); }22% { transform: translate(9px, 5px) rotate(-1.5deg); }24% { transform: translate(7px, -2px) rotate(0.5deg); }26% { transform: translate(-7px, -10px) rotate(-0.5deg); }28% { transform: translate(-10px, -8px) rotate(-1.5deg); }30% { transform: translate(8px, 4px) rotate(0.5deg); }32% { transform: translate(0px, 4px) rotate(1.5deg); }34% { transform: translate(-8px, 6px) rotate(-0.5deg); }36% { transform: translate(-5px, 7px) rotate(1.5deg); }38% { transform: translate(-4px, -4px) rotate(-1.5deg); }40% { transform: translate(9px, 4px) rotate(-1.5deg); }42% { transform: translate(9px, -5px) rotate(2.5deg); }44% { transform: translate(-5px, -4px) rotate(-2.5deg); }46% { transform: translate(7px, -7px) rotate(1.5deg); }48% { transform: translate(-5px, 8px) rotate(0.5deg); }50% { transform: translate(9px, 1px) rotate(-1.5deg); }52% { transform: translate(-9px, -5px) rotate(-3.5deg); }54% { transform: translate(-2px, 9px) rotate(1.5deg); }56% { transform: translate(6px, -1px) rotate(1.5deg); }58% { transform: translate(-6px, 0px) rotate(-0.5deg); }60% { transform: translate(3px, 1px) rotate(1.5deg); }62% { transform: translate(5px, -7px) rotate(-0.5deg); }64% { transform: translate(9px, 2px) rotate(2.5deg); }66% { transform: translate(6px, 0px) rotate(-2.5deg); }68% { transform: translate(5px, -4px) rotate(-2.5deg); }70% { transform: translate(-8px, 5px) rotate(-2.5deg); }72% { transform: translate(-6px, -2px) rotate(0.5deg); }74% { transform: translate(-3px, 7px) rotate(-3.5deg); }76% { transform: translate(-7px, -8px) rotate(-3.5deg); }78% { transform: translate(-1px, -2px) rotate(2.5deg); }80% { transform: translate(8px, 6px) rotate(-2.5deg); }82% { transform: translate(-2px, -9px) rotate(2.5deg); }84% { transform: translate(8px, -10px) rotate(-0.5deg); }86% { transform: translate(-6px, 0px) rotate(2.5deg); }88% { transform: translate(-1px, 9px) rotate(-3.5deg); }90% { transform: translate(-7px, 8px) rotate(1.5deg); }92% { transform: translate(-10px, -8px) rotate(0.5deg); }94% { transform: translate(-8px, 6px) rotate(1.5deg); }96% { transform: translate(4px, -9px) rotate(2.5deg); }98% { transform: translate(-4px, 9px) rotate(0.5deg); } }

注意：如代码复制到本地无法执行，请检查css属性配置与当前运行浏览器是否保持一致。

html部分没有什么可说的，下面主要对css部分进行说明：

display: inline-block;
当前元素必须声明为行内块元素。

transform-origin: center center;
设置元素旋转的中心坐标。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	transform-origin
IE9	-ms-transform-origin（只支持2D）
Safari Chrome	-webkit-transform-origin
Firefox	-moz-transform-origin
Opera（只支持2D）	-o-transform-origin

这个属性在部分浏览器还支持配置3D中心坐标（2D默认只有2个值，如上例的center center），相比2D多出一个z轴坐标。

属性值枚举值列表：

值	描述
x-axis	定义视图被置于 X 轴的何处。值为：left center right length %
y-axis	定义视图被置于 X 轴的何处。值为：top center bottom length %
z-axis	定义视图被置于 X 轴的何处。值为：length

animation-name: shake-slow;
为 @keyframes 动画规定一个名称。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-name
Safari Chrome	-webkit-animation-name

animation-duration: 5s;
完整执行一次动画所需时间，单位为秒或毫秒。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-duration
Safari Chrome	-webkit-animation-duration

animation-iteration-count: infinite;
重复执行动画次数，值为int或infinite（表示无限循环执行）。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-iteration-count
Safari Chrome	-webkit-animation-iteration-count

animation-timing-function: ease-in-out;
执行动画的速度曲线。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-timing-function
Safari Chrome	-webkit-animation-timing-function

属性值枚举值列表：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

备注：cubic-bezier是以贝塞尔曲线来定义速度曲线，四个参数分别对应绘制曲线所需的第二个节点和第三个节点的坐标（x1,y1,x2,y2）。

PS：笔者这里实在没看出来ease和ease-in-out的区别，有深入研究的同学求指导。

animation-delay: 0s;
动画延迟执行时间。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-delay
Safari Chrome	-webkit-animation-delay

备注：这个延迟执行时间可以为负数（如当前完整动画需要执行5秒，定义为-2秒则表示立即开始执行动画并从第2秒开始执行动画，即动画不是从头开始执行）。

animation-play-state: running;
动画执行状态，js可以通过该属性来控制动画执行和暂停。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	animation-play-state
Safari Chrome	-webkit-animation-play-state

属性值枚举值列表：

值	描述
paused	规定动画已暂停。
running	规定动画正在播放。

@keyframes
定义动画规则（这里才是真正定义动画的地方）。

不同浏览器下该属性的名称列表：

浏览器	属性名
Firefox	-moz-keyframes
Opera	-o-keyframes
Safari Chrome	-webkit-keyframes

语法规则：
@keyframes animationname {keyframes-selector {css-styles;}}

语法属性列表：

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值：0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

transform
调整dom元素位置（允许对元素进行旋转、缩放、移动或倾斜）。

不同浏览器下该属性的名称列表：

浏览器	属性名
IE10 Firefox Opera	transform
IE9	-ms-transform
Safari Chrome	-webkit-transform

transform属性的值非常多，且值为函数，下面仅给出例子中所使用值的说明：

值	描述
translate(x,y)	调整动画的2D位置（x和y对应图形的偏移量）。
rotate(angle)	调整动画的2D旋转角度。

完整的属性值列表戳这里


用一句话来解释@keyframes animationname {keyframes-selector {css-styles;}}的意思：

当动画执行到keyframes-selector时刻时把定义的css-styles应用在dom上（我们无需关心在两个keyframes-selector之间css-styles是如何过渡的）。