文字のアウトラインだけ色が変化するCSSアニメーション

やりたいこと

• テキストのアウトラインだけ色が変化するようにしたい
• テキストは決め打ちではなく、自由に変えられる

イメージ

このカラフルな部分がグラデアニメーションする感じです。

出来上がったコード

index.html

<p class="txt-outline">TEXT OUTLINE</p>

style.css

body{
 background-color:#fff; 
}
.txt-outline{
	text-align:center;
	font-size: 5rem;
	color: #fff;
	-webkit-text-stroke: 4px rgba(0,0,0,0);
            text-stroke: 4px rgba(0,0,0,0);
	font-weight: bold;
	letter-spacing:3px;
	background: -moz-linear-gradient(-45deg, #661df7 0%, #fcbf2f 25%, #ef26ba 50%, #2696f2 75%, #661df7 100%) 0% center / 200% auto;
	background: -webkit-linear-gradient(-45deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
	background: linear-gradient(135deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-animation: outlineRun 4s linear infinite;
	        animation: outlineRun 4s linear infinite;
}
/* 背景の横位置をズラす */
@-webkit-keyframes outlineRun {
  to { background-position-x: 200%; }
}
@keyframes outlineRun {
  to { background-position-x: 200%; }
}

text-strokeの色を透明にし、背景色と文字色を同じにするのがポイントです。

実際のサンプル

See the Pen outline text animation by Mei Koutsuki (@mei331) on CodePen.