引子
某日移动端有一需求：要求一 App Logo 有一层外阴影闪动效果，实现起来倒也不复杂。简单粗暴直接在 keyframes 中定义 box-shadow 动画即可交差，最终代码如下：
.box {
margin: 100px auto;
width: 200px;
height: 200px;
border-radius: 4px;
animation: boxAnimation 1s infinite linear alternate-reverse;
}
@keyframes boxAnimation {
form {
box-shadow: 0 0 0px rgba(0, 0, 0, .4);
}
to {
box-shadow: 0 0 50px rgba(0, 0, 0, .4);
}
}