做过前端开发的朋友相信大家都知道，配置一个css3动画有多复杂，多么的繁琐。网页需要华丽一点的效果往往是少不了动画，而第三方动画库也只能满足基本的动画需求，并不能定制。如用js做动画又要写很多的脚本代码，再加上js动画本身性能就不是很好。而手写css3动画也是一件非常繁琐的事情，特别是动画非常复杂的情况下动画的轨迹都需要一个个配置，从而导致一个简单的动画平常都是半小时左右。

手写css3动画工作量有那些？

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

    复杂一点则可按百分比来配置动画如下，以下还只是一个简单的背景变化，如果要做其他的效果，则每个自定义的百分比都需要手写样式，而且还需要不断调试。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 

        可以看出动画的结构与传统写class类是不一样的，其次是keyframes，from,to不是很常用单词，如果不熟悉还得去查阅文档，最后是样式动画执行过程中的每一片段都需手写样式，手写样式就得记住各种样式名称，比如旋转transform:rotate(1deg)，平行位移translate(7px,-13px)。就算你记住了还得手写代码一个个去输入。就算输入正确，实际效果还得不断的改代码才能慢慢调整好。

        而这还只是定义动画，使用动画更为复杂。可以看看以下文档，我想应该是没有人会去记这些单词的。这些参数我们也只能一个个去查文档进行对照。随便一个功能都要找很长时间，比如我想让动画循环播放，让动画均匀播放等。

        所以说为什么配置一个动画需要半小时左右。

可视化配置css3动画又能省去多少时间？

         那我们用guiplan可视化配置css3需要多久呢？以上定义动画我们不需要记这些动画属性单词，也不需要复制粘贴代码。动画的执行过程中每个片段效果，更不需要手写css代码。随便拖拽，点击选择就能搞定动画的配置。

       创建动画之后我们再来看看使用动画多么简单，之前就了解过了使用动画我们要查阅文档或记住这些动画属性，不仅浪费时间而且文档深入理解也不是一键容易的事。而在guiplan中可视化配置这块已经给你翻译成了中文说明，使用过程也很简单点击加减按钮，或输入尺寸，或拖拽加减按钮都可以快速设置动画参数。一个代码都不需要写，也不需要研究参数，也不需要记单词。手写代码需要耗费十几分钟到二十分钟研究并测试，而guiplan中只需几秒搞定配置。再补充一点，动画配置好之后，动画名称里的内容也会自动填写。

         所有的加减按钮是可以进行拖拽的，而且拖拽的过程也有痕迹，动画的执行的轨迹拖拽就能看得一清二楚。所以并不需要手写代码一个个微调整。其实微调整是最耗费时间。用代码一点点改，效率也是非常的低。

如何可视化配置css3动画呢？

2.在样式配置中选择动画定制

3.点击添加关键帧，有两种模式可供选择。如果是简单的动画只需选择开始位置与结束位置。如果是复杂一点的动画可以按百分比进行选择。其次文本框里的内容是可以手动输入的，比如输入15.5%表示时间过了15.5%之后做什么动作。

4.重复以上操作即可创建多个关键帧。这里以from与to为例。下拉框中我们就可以选择关键帧进行可视化配置了。其次动画名称系统会自动生成，也就是keyframes的名称。如果对命名有要求可直接修改掉名称。

5.可视化配置动画样式，比如配置标题进行旋转，选择关键帧to然后通过可视化配置旋转角度即可。

6.调用动画：配置完动画之后我们再选择调用默认样式，底部我们就可以看到该样式自动调用了动画名，并且默认动画一周期执行时间为1秒。

7.动画播放配置：动画多久开始播放，播放时长，播放次数，播放过程都可以进行可视化配置即可。

8.动画的复用：动画配置好之后，该默认样式的样式名称即可作为公共样式了，其他模块如想添加该动画只需将样式名称复制到公共样式类名中即可。