適用場(chǎng)景和效果描述：箭頭線的寬度不定，箭頭一直向右循環(huán)前進(jìn)，且可隨意設(shè)置顏色

做不來(lái)gif，將就看吧

原理： 背景設(shè)置漸變色，通過(guò)控制遮罩層的圖形樣式和位置，來(lái)實(shí)現(xiàn)箭頭向右移動(dòng)的效果，優(yōu)點(diǎn)遮罩圖形和背景圖相似不設(shè)置是否重復(fù)就會(huì)無(wú)限重復(fù)，因此除代碼簡(jiǎn)單外，任意寬度的容器，都是相同的效果。
需要素材：一個(gè)向右的小三角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;
   }
}

說(shuō)明： mask-image的url是將素材svg通過(guò)在線工具轉(zhuǎn)化成base64使用的，
mask-position的第一個(gè)值跟svg圖片的寬度有關(guān)，可以發(fā)f12中調(diào)到合適的寬度就不會(huì)出現(xiàn)卡頓