どうも！LSSです！！
に続き、
の「戦慄！」もアニメーション化してみました。
サンプル
戦慄！
コード
<style><!--
@keyframes snrtanm{
0%{background-position:0px 0px;}
60%{background-position:120px -270px;}
100%{background-position:60px -540px;}
}
.snrta{
font-size: 100px;
font-weight: bold;
color: black;
background-size:60px 60px;
background-image:
radial-gradient(circle 33px at 25% 25%,red 20%,transparent 80%),radial-gradient(circle 33px at 75% 75%,red 20%,black 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation:snrtanm 10s linear 0s infinite;
}
--></style>
<p><span class="snrta">戦慄！</span></p>
あとがき
この「戦慄！」はグラデーションを２つ使っていますが、すんなりアニメーションしてくれていますね^^
動きもちょっとだけ凝ってみました。
0%{background-position:0px 0px;}
60%{background-position:120px -270px;}
100%{background-position:60px -540px;}
の部分で動き（時間経過時の位置）を設定しています。
最終的に、右に60px、上に540pxの位置まで動く事になりますが、
background-size:60px 60px;
で背景の単位を60pxの正方形としているため、60の倍数で指定しておくと次のアニメーションとの境目が自然に繋がる事になります^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
