SVGのテキストの輪郭の破線の間隔をアニメーションすることによって、文字の縁取りをするような表現になります。
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="demo">
<text x="10" y="60" font-size="50" class="demo">
文字の
</text>
<text x="10" y="120" font-size="50" class="demo">
輪郭を
</text>
<text x="10" y="180" font-size="50" class="demo">
アニメ
</text>
</svg>CSS
<style>
svg.demo{
margin:20px;
width: 300px;
display:block;
margin:40px;
background-color: #CCC;
}
text.demo{
fill:#FFF;
font-weight:900;
stroke:#F00;
stroke-width: 2px;
stroke-dasharray: 500;
animation: demo_kururi ease 5s infinite;
}
@keyframes demo_kururi {
from {
stroke-dashoffset: 500;
}
to {
stroke-dashoffset: 0;
}
}
</style>
