如不了解CSS3动画可以点击这里了解动画原理。

挟翼站点设计工具为我们提供了强大的CSS3动画制作过程，它让动画制作变得更加简单，为我们面去了繁琐的CSS脚本。

下图为动画面板示意图：

1、如何打开动画面板。

在视图页面中，选择要执行的动画元素，然后在菜单栏上选择”工具“，”动画“，弹出如上图所示的面板。

2、功能介绍。

区块H1中的图标分别是：新建\编辑、保存、删除、运行、暂停、停止、预览、事件、关闭元素选择。

事件：可以选择HTML的一些事件。

运行：挟翼网站设计提供了运行功能，点击运行之后，视图中会模拟动画运行的效果。当然如果你觉得这个效果不怎么样，你可以点击预览（图中H1中的眼睛）,程序会打开您的默认浏览器进行预览。

关闭元素选择：当你在视图中运行的是时候，当前元素为选中元素，他会显示选中的边框，以及MARGIN，这些对于视图中预览来说效果不是很好，点击此处就可以关闭。

3、H2为帧区域。

该处为帧列表也就是CSS3中的@keyframes

右键可以新建帧，它的右侧（H3区域）为帧对应的数据，右键可以新建、编辑、删除帧的数据。

拖动帧可以修改帧的位置，如果将帧拖到空白出则删除当前帧。

这里动画的帧属性名称只有（opacity，rotate，scale，skew，translate）其它属性名称暂时没有。

这里需要注意的是：如果帧没有添加帧的对象和值，那么他就是默认值。

举类说明：

如果在%0处，新建了一个动画帧，但这里不设置帧的数据。

在66%处新建一个帧，它对应的帧数据为：translateX：-300px，opacity：0，那么0%处的值为：translateX：0px，opacity：1。

如果帧没有设置值，它所有的值都是系统默认的值。