前面我们已经说过了要怎样制作CSS3动画，但是SVG动画一直都没有时间研究过，正好趁现在有一点时间静下心来研究一下。

一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画（SVG动画），JS动画或者我们可以称之为Canvas动画

这里主要我们是要讲解的是SVG动画的实现方法。

常见的SVG动画有三种实现方式

第一种，通过原生的SVG来实现，但是这种方法的实现效率较低，而且很多较为精确的动作比较难实现

第二种，通过常见的SVG动画库来实现，比如svg.js，snap.js之类的来实现，可以实现比较灵活的交互，复杂的线性动画也是很难实现的

第三种，是结合PS,AI,CSS3来实现有，这种方法交互需要自己实现，相对会比较繁琐，但是优势就是可以实现一些复杂的线性动画,而且也要求你的知识面要广阔一些

这个动画方案的实施，需要我们准备好，这些东西，

PS,AI，基础的SVG基础

我们要达到的效果是：

阿里巴巴的LOGO SVG会执行线性的运动。

首先我们先下载一张图，我们选择的是阿里巴巴的logo

这个时候我们发现阿里巴巴的图标背景不是透明的，所以我们需要这样操作来讲这个图标变成透明。

1、新建一个空白的涂层

2、使用快速选择工具将要保留的内容选择出来，记得要，调整边缘。

3、copy选中的区域，将内容粘贴到空白的涂层上面

如下：

4、这个是否我们按住Ctrl+图层，接着右击选中区域，选择新建空座路径

容差值，这个可以根据我们的要求自我调节

5、导出到AI，选择 文件--导出--路径到illustrator

紧接着，我们打开AI文件，如下：

这里我们可以看到，内容是空白的，这个时候别急，我们需要做的是选择扣选工具，我们就可以看到路径了

在是在这一步的时候才可以进行图像的大小

6、调节之后确认无误，导出为SVG,选择存储为svg格式

 这样SVG图片制作完成了

 好了，这个时候图片的SVG代码已经制作好了，这个时候我们就要新建一个HTML代码，将SVG代码拷贝到HTML代码里面，代码如下：

 这个时候我们还需要获取整个图片路径的直线长度，方便CSS对路径的计算。

JS代码如下：

 给图片添加CSS3样式，并且给svg中的path添加alibaba class

.container {
               width: 400px;            margin: 0 auto;        }        .alibaba {
               stroke-width: 1px;            stroke: #ccc;            animation: lineMove 3s ease-out infinite;        }        @keyframes lineMove {
               0% {                stroke-dasharray: 0, 1269.3662109375;            }            50% {
                   stroke-dasharray: 1269.3662109375, 1269.3662109375                fill: rgba(0, 0, 0, 0);                opacity: 1;            }            100% {
                   stroke-dasharray: 1269.3662109375, 1269.3662109375;                fill: rgba(239, 114, 32, .9);                opacity: 0;            }        }

 运行的效果如下：

 好了，大功告成了，是不是很神奇