<h1 class="grad-anime-ttl">
<span class="grad-anime-ttl-inner">テキスト</span>
</h1>
.grad-anime-ttl{
}
.grad-anime-ttl-inner{
display: inline-block;
background: linear-gradient(270deg, #9ce2ee, #2b4cff);
background-clip: text;
background-clip: text;
text-fill-color: transparent;
background-size: 400% 400%;
animation: AnimationName 8s ease infinite;
animation: AnimationName 8s ease infinite;
animation: AnimationName 8s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.