起源

自己的过渡动画，为什么要这个东西呢？不是说好的Simple is beautiful么。的确我也是非常欣赏简洁的东西，但是对于挂载在Github上的本博客，在国内访问总是不那么流畅，而Next主题的文字下落动画恰恰使博客访问体验变的非常糟糕（感觉访问变得更慢了）。所以本喵决定打造自己的过渡动画。

借鉴

在两三个月前记得访问过一个个人博客，过渡动画非常惊艳，但当时并没有时间详细琢磨实现细节。如今正好借鉴一番，经过一番Google，还是本喵找到了（但是作者的博客好像没有维护了，无法访问），好在也是依托Github pages 挂载的博客，直接把源码下载下来进行研究。

地址：

实现细节

动画并非纯css实现而是使用了SVG + CSS

可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。 SVG由W3C制定，是一个开放标准。

既然是矢量图，它的缩放就不会失真，因为表示方法是基于数学的表示，而不是像素点。动画中的笔画即是基于SVG中path标签中的数据先后顺序。

#mySVG path {  stroke: #000;  stroke-width: 2px;  stroke-dasharray: 11434;  stroke-dashoffset: 11456;  -webkit-animation: dash 5s linear infinite;  animation: dash 5s linear infinite;  -webkit-animation-fill-mode: both;          animation-fill-mode: both;/*   -webkit-transition:fill 0.5s 1s linear;  transition:fill 0.5s 1s linear;*/}@-webkit-keyframes dash {  10% {    stroke-dashoffset: 11456;  }  70% {    stroke-dashoffset: 0;    fill: transparent;  }  80% {    stroke-dashoffset: 0;    fill: #000;  }  95% {    stroke-dashoffset: 11456;    fill: #000;  }  100% {    stroke-dashoffset: 11456;    fill: transparent;  }}

不过当我理解了这svg两个属性(stroke-dasharray，stroke-dashoffset)后，还是非常震惊于这个动画的实现原理。

stroke-dasharray属性可控制用来描边的点划线的图案范式。

MDN给出的示例：

stroke-dashoffset属性指定了dash模式到路径开始的距离

通过CSS修改这两个属性，动画的边界就相应的动起来了。

我的实现

我的素材：

使用 AI 得到 SVG，最终效果：