在网站上，CSS3过渡和动画是创建轻量级动画的首选方法。不幸的是，许多开发人员发现他们自己的语法复杂和混乱。如果听起来像你自己，也许Move.js是你的完美解决方案。Move.js是一个简单的JavaScript库，使用简单的函数来创建CSS3动画。本教程将讨论Move.js的基本知识，并提供一个在线演示。

基础知识

Move.js为创建CSS3动画提供了最简单的JavaScript API。让我们假设有一个带有类框的div元素号。当鼠标在div上移动时，我们希望将元素从左边移动100像素。在这种情况下，我们的代码如下所示：box {-web kit-transit :页边空白1s；-moz-transit :保证金1s；-o-transit :保证金1s；transition:边距1s；} . box : hover { margin-left : 100 px；}使用Move.js，我们可以简单地调用set()方法来达到同样的结果，如下所示：

移动('。方框')。set('左边距'，100)。end()；初级课程

首先，访问Move.js GitHub页面并下载最新的包，将Move.js文件提取并复制到您的工作目录中。接下来，将该文件引入您的html页面。完成的页面应该如下所示：

！DOCTYPE html html head title move . js Demo/title link rel='样式表' type=' text/CSS ' href=' styles . CSS '/head body A href=' # ' ID=' play button ' play/A div class=' box '/div script type=' text/JavaScript ' src=' http 3360 js/move . js '/script/body/html我们已经为我们的演示定义了一个带有一个box类的div元素和一个带有play button ID的链接让我们创建一个styles.css文件并添加以下样式。请注意，以下样式对于Move.js不是必需的：box { margin: 10px宽度： 100 px；高度： 100像素；背景# 7C9DD4box-shadow : 5px 5px 0px # D1D 1；} # playButton { display : block；font-size : 20px；margin: 20px 10pxfont-weight:粗体；color: # 222文本装饰：无；}我们的html页面应该如下图所示：

现在，让我们写下第一个Move.js片段。我们需要在播放按钮上附加一个onclick事件处理程序，并在单击时将其向右移动。事件处理程序的JavaScript代码如下。此代码将transform:translateX(300px)添加到box元素编号中：

document . getelementbyid(' playButton ')。onclick=function(e) { move('。方框')。x(300)。end()；};添加Move.js代码后的完整代码如下：

超文本标记语言

！DOCTYPE html html head title move . js Demo/title link rel='样式表' type=' text/CSS ' href=' styles . CSS '/头体a href=' # ' id=' play button ' play/a div class=' box '/div脚本类型=' text/JavaScript ' src=' http : js/move . js '/脚本脚本类型=' text/JavaScript ' document . getelementbyid(' playButton ')。onclick=function(e){ move('。方框')。x(300)。end()；};/script /body/htmlCSS。box { margin-left : 10px；宽度： 100 px；高度： 100像素；背景# 7C9DD4box-shadow : 5px 5px 0px # D1D 1；} # playButton { display : block；font-size : 20px；margin: 20px 10pxfont-weight:粗体；color: # 222文本装饰：无；}Move.js的方法

在前面的演示中，我们看到了x()方法。现在，让我们了解一下Move.js集合的其他方法(prop，val)

Set()方法用于设置元素的css属性，它有两个参数：css属性和属性值。示例用法：设置('背景色'，' #CCC ')。set('左边距'，500)。set('color '，' #222 ')

添加(道具、值)

add()方法用于增加设置的属性值。方法必须是数字才能增加。该方法必须有两个参数：属性值及其增量：调用前一个代码片段后，add('margin-left '，200)的值将增加200px。辅助(支柱、阀门)

Sub()是add()的逆过程。它接受两个相同的参数，但其值将从属性值中减去。sub('左边距'，200)旋转(度)

顾名思义，此方法通过提供数值作为参数来旋转元素。当调用方法时，它被附加到元素的转换属性。以下代码将元素旋转90度：旋转(90)这段代码将向元素添加以下css:

变压器：旋转(90度)持续时间(n)

用这个方法，可以设置动画的播放时间。例如，以下代码在2秒内将元素从左向右移动200px:set('左边距'，200)。持续时间(' 2s ')另一个例子，下面的代码。在2秒内，Move.js将修改元素的边距属性，设置背景颜色，并将元素旋转90度。set('左边距'，200)。设置('背景色'，' #CCC ')。旋转(90)。持续时间(' 2s ')转换(x[，y])

translate()方法用于修改元素的默认位置，使用提供的坐标作为参数。如果只设置了一个参数，它将是X坐标，如果提供了第二个参数，它将是Y坐标：平移(200，400)x()和y()

x()方法用于调整元素的x坐标，y()方法用于调整元素的y坐标。两种方法的参数可以是正的，也可以是负的，如下所示：x(300)。y(-20)偏斜(x，y)

Skew()用于调整相对于x轴和y轴的角度。该方法可分为偏斜度(deg)和偏斜度(deg)方法：倾斜(30，40)刻度(x，y)

此方法用于放大或压缩元素的大小。根据提供的每个值，将调用转换的比例方法：音阶(3，3)轻松度(fn)

如果您已经使用了CSS3转换，您将知道ease函数作用于转换属性。他详细说明了转变的行为。每一个轻松功能都是进、出、进、出、按扣、立方等。这些函数可以通过Move.js提供的ease()方法调用，例如：放松(' in ')。x(400)。放松('三次贝塞尔曲线(0，1，1，0)')。x(400)端()

此方法用于Move.js代码片段的结尾，这标志着动画的结束。技术上，这个方法触发动画的播放。方法接受可选的回调回退函数。代码如下：

移动('。方框')。设置('背景色'，'红色')。持续时间(1000)。end(function() { alert('动画结束！');});延迟(n)

正如该方法所暗示的，该方法提供时间值作为动画延迟。如下所示：

移动('。方框')。设置('背景色'，'红色')。延迟(1000)。end()；然后()

这个方法是Move.js中最重要的功能之一，用于将动画分成两组，并按顺序执行。以下动画分为两个步骤，由then()进行分段：

移动('。方框')。设置('背景色'，'红色')。x(500)。然后()。y(400)。设置('背景色'，'绿色')。end()；# #使用Move.js创建复杂的动画# #

在本教程中，我们已经编写了许多基本动画来理解每种方法。接下来，我们可以使用Move.js轻松创建复杂的动画。这个演示解释了Move.js的大部分内容，可以在演示页面中找到

我们创建了描述动画，代码如下：

移动('。正方形')。到(500，200)。旋转(180)。比例尺. 5。设置('背景色'，' #FF0551 ')。set('边框颜色'，'黑色')。持续时间(' 3s ')。歪斜(50，-10)。然后()。设置(“不透明度”，0)。持续时间(' 0.3s ')。比例(0.1)。pop()。end()；结论

希望这个教程能让你对什么是Move.js，如何创作CSS3动画有一个清晰的认识。使用Movejs可以帮助您在一个地方正确地组织所有动画代码。每当你想修复一个动画，你就会知道它就在那里。