在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。本教程将探讨Move.js的基础知识，并提供一个在线demo。
基础知识
Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数，当鼠标 移动到 div 上面的时候我们想从左侧移动元素100个像素。在这种情况下，我们的代码如果所示：
.box { -webkit-transition: margin 1s; -moz-transition: margin 1s; -o-transition: margin 1s; transition: margin 1s; } .box:hover { margin-left: 100px; }
使用 Move.js 我们可以简单调用 set()方法实现同样的结果，如下：
move('.box') .set('margin-left', 100) .end();
入门
首先，访问 Move.js GitHub page并下载最新的包，提取并拷贝 Move.js 文件到你的工作目录。接下来，在你的html 页面中引入该文件。完成后的页面应该如下：
<!DOCTYPE html> <html> <head> <title>Move.js Demo</title> <link type="text/css" href="https://www.jb51.net/styles.css"> </head> <body> <a href="#">Play</a> <div></div> <script type="text/javascript" src="https://www.jb51.net/js/move.js"></script> </body> </html>
我们 已经定义了一个类为 box 的 div 元数和一个ID为playButton的a链接以用于我们的demo。让我们创建一个styles.css文件并添加下面的样式。注意下面的样式对于Move.js来说不是必须的：
.box { margin: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1; } #playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none; }
我们的html页面看起来应该如下图：
现在，让我们写下第一个Move.js片段。我们需要附加一个onclick事件处理程序到palyButton上，并在单击的时候使其向右移动。事件处理程序的JavaScript代码如下，这段代码添加 transform:translateX(300px) 到 box 元数上：
document.getElementById('playButton').onclick = function(e) { move('.box') .x(300) .end(); };
添加Move.js代码后的完整代码如下：
HTML
<!DOCTYPE html> <html> <head> <title>Move.js Demo</title> <link type="text/css" href="https://www.jb51.net/styles.css"> </head> <body> <a href="#">Play</a> <div></div> <script type="text/javascript" src="https://www.jb51.net/js/move.js"></script> <script type="text/javascript"> document.getElementById('playButton').onclick = function(e){ move('.box') .x(300) .end(); }; </script> </body> </html>
CSS
.box { margin-left: 10px; width: 100px; height: 100px; background: #7C9DD4; box-shadow: 5px 5px 0px #D1D1D1; } #playButton { display: block; font-size: 20px; margin: 20px 10px; font-weight: bold; color: #222; text-decoration: none; }
Move.js的方法
在前面的demo中，我们看到了x()方法。现在，让我们了解Move.js的其他方法。
set(prop, val)
set()方法用于设置元素的css属性，他带有两个参数：css属性和属性值。示例用法：
.set('background-color', '#CCC') .set('margin-left', 500) .set('color', '#222')
add(prop, val)
add()方法用来增加其已经设置的属性值。该方法必须数值型值，以便用来增加。该方法必须有两个参数：属性值和其增量：
.add('margin-left', 200)
在前面的代码片段调用后，会在其值的基础上增加200px。
sub(prop, val)
sub()是add()的逆过程，他接受两个相同的参数，但其值将从属性值中减去。
.sub('margin-left', 200)
rotate(deg)
正如名称所暗示的，该方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的 transform 属性上。下面的代码旋转元素90deg：
.rotate(90)
这段代码将添加如下css到元素上：
transform:rotate(90deg)
duration(n)
通过该方法，你可以设置动画的播放时间。例如：如下代码，2秒钟将元素从左侧往右移动200px：
.set('margin-left', 200) .duration('2s')
另一例子，下面的代码。Move.js在2秒钟内将会修改元素的margin属性，设置背景色，同时将元素旋转90度。
.set('margin-left', 200) .set('background-color', '#CCC') .rotate(90) .duration('2s')
translate(x[, y])
translate()方法用于修改元素的默认位置，使用提供的坐标作为参数，如果仅设置一个参数，将作为x坐标，如果提供了第二个参数，将作为y坐标：
.translate(200, 400)
x() and y()
x()方法用于调整元素的x坐标，y()方法用于调整元素的y坐标。两个方法的参数可以是正数也可以是负数，如下：
.x(300) .y(-20)
skew(x, y)
skew()用于调整一个相对于x和y轴的角度。该方法可以被分为skewX(deg)和skewY(deg)两个方法：
.skew(30, 40)
scale(x, y)
该方法用于放大或压缩元素的大小，按照提供的每一个值，将调用transform的scale方法：
.scale(3, 3)
ease(fn)