纯css动画实现箭头向右无限前进

适用场景和效果描述：箭头线的宽度不定，箭头一直向右循环前进，且可随意设置颜色

做不来gif，将就看吧

原理： 背景设置渐变色，通过控制遮罩层的图形样式和位置，来实现箭头向右移动的效果，优点遮罩图形和背景图相似不设置是否重复就会无限重复，因此除代码简单外，任意宽度的容器，都是相同的效果。
需要素材：一个向右的小三角svg矢量图

如图

html部分

<div class="arrow-pic"></div>

css部分

.arrow-pic {
  width: 100%;
  height: 15px;
  background-image: linear-gradient(100grad, rgb(237, 64, 20), rgb(255, 153, 0));
  animation: move-arrows-data-v-acbcb780 .5s linear infinite;
  transform-origin: left;
  mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAlCAMAAACAj7KHAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAYZQTFRFAAAA///9tM/8ss789/n8+fv8+Pr8///9ncH7V5n6lLv73+r9///8///9m7/7S5H4YJ75f676uNP88/f9//78/Pz8nMH7T5P5Wpv6XJv6cqf6l7/80uP8/v38+fr8msH7TpL5X536X535WZr5WJn6fq/7uNL86fD8/v78/v38m8D7TpL4Xpz5Upb5ZqL6oMT82eb89vj8/v38YJ76XJ36Vpj5d6v7wdj77fL87vT8+fr8+/v8T5P4YZ/6W5z6Z5/6nMD74ev99ff99/j8Yp36YqD7ZqL6daj7vNT7y978YJ/6r838wtr8YZz6WZv6W5z5h7T7w9n85O386vH8nMD7aqT6pMf72ub89Pj8/f38/v38X576YaD6hrT7vNb88fX9///9Xpz6XZz6baT6nMH73un8///8//38XZz5ZaH5d6v7u9X79/j8+fr8XZv6aKL6nsL75e78+fr8+/v8mL/7RY74eKv6xdv88PX87fL89/n8+/v8///9rsz7m8D73un89Pj8/P38OXW/XgAAAIJ0Uk5TADvJxWlSAjnJ+9yMSDjI///pwFRKD8j////81qNRC8j//////+nDYiUdyP/////UmmYU////97B0FREF/////+CEdB3///75wSz/0jD////yrZIkyP7MlSwoC///57hyJf//9N6BPi///fK2bBr//d57aiDI//WqbhILAkHa5JBmEa+njl4AAADXSURBVHicY2AYBYQAIxMzCysbNhl2Dk4ubh5sMrx8/AKCQsIiopgyYuISklLSMrJyGDLyCopKyiqqauoammgyWto6SkqKunr6BoZG6KYpGgOBiamZuYWllTWyjI2SopKxsa2tnb2Do5Mzuh4XF1tbW1c3dw9PdHuMBYBSXhKK3j6oenyNQab5+QcEBgUjyYRA7DExDQ0Lj4iMQpeJVomJjYtPwHR1YlJySmpaOoZPM5Qys7JzcrGEW15+QWFRMboEA29JaVl5RWVVNYZMTW1dfUMjhvCwAgC0nCyfAdk/6AAAAABJRU5ErkJggg==');
  mask-size: contain;
}
@keyframes move-arrows {
  100% {
       mask-position: 10px 0;
   }
}

说明： mask-image的url是将素材svg通过在线工具转化成base64使用的，
mask-position的第一个值跟svg图片的宽度有关，可以发f12中调到合适的宽度就不会出现卡顿