与move.js创建CSS3动画入门指南

在网站上，CSS3的过渡和动画是创建轻量级的动画的第一选择。不幸的是，许多开发商找到自己的语法和他们的复杂和混乱。如果这听起来像你自己，你是最完美的，也许move.js solution.move.js是使用简单的功能创建的CSS3动画简单的Javaｓｃｒｉｐｔ库。本教程将探讨move.js的基本知识和提供一个在线演示。

基本知识

move.js提供简单的Javaｓｃｒｉｐｔ API创建CSS3动画。让我们假设我们有一批与类箱div元素，当鼠标移动到div，我们要移动的元件100像素左右的。在这种情况下，我们的代码如下所示：
{。箱
WebKit的过渡：缘1s；
过渡：缘1s -moz；
- O转换：缘1s；
过渡：保证金1；
}
{框：悬停
左：100px保证金；
}

使用move.js，我们可以简单的调用设置（）来达到同样的效果的方法，如下：
移动（盒子）
（'margin-left。集，100）
结束（）；

介绍

首先，move.js GitHub页面访问和下载最新的软件包，解压和复制的move.js文件到你的工作目录下，文件导入你的HTML页面，完成页面应该如下：
move.js演示
玩
我们已经定义了箱体类和链接一个ID为我们演示显示播放按钮的div元素，让我们创建一个styles.css文件并添加以下样式。注意以下款式不必要的Move.js：
{。箱
保证金：10px；
宽度：100px；
身高：100px；
背景：# 7c9dd4；
盒子的影子：5px 5px 0px # d1d1d1；
}
{ #显示播放按钮
显示块；
字体大小：20px；
保证金：20px 10px；
字体粗细：粗体；
颜色：# 222；
文字装饰：无；
}

我们的HTML页面如下所示：
现在，让我们写一move.js片段。我们需要添加一个onclick事件处理程序的palybutton向右移动当你点击，事件处理程序的Javaｓｃｒｉｐｔ代码如下：这段代码添加一些变换：translatex（300px）对箱元素个数：
document.getelementbyid（'playbutton）。Onclick =功能（e）{
移动（盒子）
x（300）
结束（）；
}；

添加move.js代码后的完整代码如下：

HTML
move.js演示
玩
document.getelementbyid（'playbutton）。Onclick =功能（e）{
移动（盒子）
x（300）
结束（）；
}；

CSS
{。箱
左：10px保证金；
宽度：100px；
身高：100px；
背景：# 7c9dd4；
盒子的影子：5px 5px 0px # d1d1d1；
}
{ #显示播放按钮
显示块；
字体大小：20px；
保证金：20px 10px；
字体粗细：粗体；
颜色：# 222；
文字装饰：无；
}

move.js的方法

在前面的演示中，我们看到了X（）的方法。现在，让我们了解move.js的其他方式。

集合（道具，瓦尔）

设置（）方法使用两个参数设置CSS属性：CSS属性和属性值：
。集（'background-color '，' # CCC）
（'margin-left。集，500）
。集（色彩，# 222）

添加（道具，瓦尔）

Add（）方法用于增加它所设置的属性的值。方法必须是数值，以便增加。方法必须有两个参数：属性值及其增量：
。添加（'margin-left '，200）

前面的代码段的电话后，该200px是其价值的基础上增加了。

子（道具，瓦尔）

子（）是加（）的逆，它接受两个相同的参数，但是它的值将从属性值中减去。
。子（'margin-left '，200）

旋转（度）

顾名思义，该方法旋转元件提供的值作为参数。当方法被调用时，它是连接到单元的变换属性。下面的代码90deg旋转元件：
旋转（90）
此代码将将CSS添加到元素如下：
变换：旋转（90度）

持续时间（n）

通过这种方法，你可以设置动画的播放时间。例如：下面的代码，2秒将从左到右200px元素：
（'margin-left。集，200）
持续时间（'2s）。

另一个例子，下面的code.move.js将在2秒内修改元素的边距属性，设置背景颜色，和元素旋转90度。
（'margin-left。集，200）
。集（'background-color '，' # CCC）
旋转（90）
持续时间（'2s）。

翻译（x，{，}）

翻译（）方法用于修改元素的默认位置，并使用提供的坐标作为参数。如果只有一个参数被设置，它将被用作x坐标。如果提供了第二个参数，它将被用作y坐标。
翻译（200, 400）

x（）和y（）

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

偏斜（x，y）

斜（）是用来调整一个角度相对X和Y轴的方法可分为两种方法：skewx（DEG）和skewy（度）。
歪斜（30, 40）

刻度（x，y）

此方法用于放大或压缩元素的大小，并根据所提供的每个值调用变换的缩放方法：
比例（3, 3）

放松（FN）

如果你使用CSS3的过渡，你知道缓解功能的过渡性质。他指定的过渡行为。每个功能的疏解是，，在，拍，三次贝塞尔，等等。这些功能可以被轻松的move.js.for实例方法（）：
。缓解（）X（400）。
。缓解（'cubic-bezier（0,1,1,0）'）x（400）。

（完）

该方法用于move.js代码片段的结束，确定动画的结束。从技术上讲，该方法触发动画播放。这个方法接受一个可选的回调回调函数，代码如下：
移动（盒子）
。集（'background-color'，'）
持续时间（1000）
结束（函数（）{（））
警报（动画）！；
}）；

Delay（N）

根据该方法的建议，该方法提供作为动画延迟的时间值：
移动（盒子）
。集（'background-color'，'）
延迟（1000）
结束（）；

（然后）

这种方法是在move.js.he最重要的功能之一是将动画分为两集和执行它的秩序。下面的动画分为两个步骤，为当时的（）方法：
移动（盒子）
。集（'background-color'，'）
x（500）
然后（）
y（400）
。集（'background-color'、‘绿色'）
结束（）；

使用move.js创建复杂的动画# # # #

在本教程中，我们写了很多基本的动画来了解各种方法。下一步，我们可以很容易地创建复杂的动画move.js.the演示介绍了大多数的move.js内容，在演示页

我们创建了动画的描述。代码如下：
移动（正方形）
（500, 200）
旋转（180）
比例（5）
。集（'background-color '，' # ff0551）
（'border-color。集，）
持续时间（3S）。
歪斜（50，- 10）
然后（）
（'opacity。集，0）
持续时间（'0.3s）。
比例（0.1）
（流行）
结束（）；

结论

我希望本教程将给你一个清晰的认识，Move.js是什么以及如何创建使用CSS3动画。movejs可以帮助你组织所有的动画代码正确地在一个地方，在任何时候你想修理一个动画，你知道他在哪里。