早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：
刚开始以为是gif动画之类的，审查元素发现居然是用SVG + CSS3动画实现的，顿时激起了我的(hao)欲(qi)望(xin)，决定要一探究竟，查看代码之后，发现原理居然是如此简单：多个SVG描边动画使用不同的animation-delay即可！
对于一个形状SVG元素或文本SVG元素，可以使用stroke-dasharray来控制描边的间隔样式，并且可以用stroke-dashoffset来控制描边的偏移量，借此可以实现描边动画效果，更具体的资料可以看看张大神的《纯CSS实现帅气的SVG路径描边动画效果》
我们先实现一个简单的文字描边动画：
.text{
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke: #3498db;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
演示地址：http://output.jsbin.com/demic…
然后我们同时使用多个描边动画，并设置不同的animation-delay：
注意：要使用多少种颜色，就放多少个text
.text{
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
}
.text-1{
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
}
.text-2{
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
}
.text-3{
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;
animation-delay: -4.5s;
}
.text-4{
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;
animation-delay: -6s;
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
大功告成，演示地址：http://output.jsbin.com/vuyuv…
需要注意的几个点：
1.各个元素的animation-delay与animation的总时长的设置要协调
2.stroke-dashoffset与stroke-dasharray的设置要协调
