SOURCE

/*

我第一次见到这个动画之前是非常想不通的，纯css如何实现这样的效果，这两个线条是怎么样实现这种运动的。
后来看了源码发现他是利用一个clip属性来控制元素的展示区域来实现的。
给元素添加背景色之后就看起来明朗多了，这不是线条的走动，而是形状的变换，在变化的过程中，用一定的规律来显示一部分边框，造成一种线条在往前走动的错觉。

时间函数：时间函数有两种，一种是立方贝塞尔曲线的子集，一种是阶梯函数。
立方贝塞尔曲线由四个点来定义，第一个点和最后一个点，分别表示动画的起点和终点。曲线的x轴表示一个动画的运行时间最大值是1，y轴表示动画的实现效果。比如一个2秒钟的动画，起点的透明度是0，终点的透明度是0.5，在起点和终点之间y轴的值是可以大于0.5的，
但是这个值并不是我们直接写的值，我们直接写的是曲线的两个控制点的位置，y轴的值是需要计算出来的。
B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
但是我们平时工作中基本不需要这么麻烦，稍微了解一下这个情况就可以。而且这里还有个网站是可以直接看对应的曲线的动画效果

http://cubic-bezier.com/#.25,.1,.45,1.61
*/

<div class="origin">origin</div>
<div class="once">once</div>
<div class="steps">steps</div>

body{
	background:#fdffe5;
}
.origin::after,.origin::before,
.once::after,.once::before,
.steps::after,.steps::before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background:rgba(222,222,222,0.3) */
}

.origin,
.once,
.steps{
	position:relative;
    width: 200px;
    height: 200px;
    margin:240px auto 0;
    background: no-repeat 50% 50%/70% 70% rgba(0,0,0,.1);
    color: #f9852f;
    box-shadow: inset 0 0 0 1px rgba(145, 202, 98, 0.5)
}

.origin::after,.origin::before,
.once::after, .once::before,
.steps::after, .steps::before{
    content: '';
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 4s linear infinite;
    /* animation: clipMe 4s ease infinite; */ //慢 -> 快 -> 慢
    /* animation: clipMe 4s ease-in infinite; //慢 -> 快 */
    /* animation: clipMe 4s ease-in-out infinite; // 慢 -> 快 -> 慢 这个相比ease 慢速的部分更多一些 */
    /* animation: clipMe 4s ease-out infinite; // 快 -> 慢 */
}
.once::after, .once::before{
  animation: clipMe 4s linear;
  animation-fill-mode:forwards; // 运行完之后回到开始状态，动画过程外的状态
}
.steps::after, .steps::before{
  animation: clipMe 4s steps(4, start) infinite
}
.origin::before {
    animation-delay: -2s
}
.origin::after:hover {
  animation-play-state: paused;
  animation-play-state: paused;
}
@keyframes clipMe {
    0%{
        clip: rect(0,220px,2px,0)
    }

    25% {
        clip: rect(0,2px,220px,0)
    }

    50% {
        clip: rect(218px,220px,220px,0)
    }

    75% {
        clip: rect(0,220px,220px,218px)
    }
  100% {
        clip: rect(0,220px,2px,0)
    }
}