今日のsvgその2

今度はsvg+cssを使ったアニメを練習してみた。

sample

たのしい。
コードは以下

svg

<svg>
	<path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" />
	<text id="text" font-size="8" dx="0" dy="0">
		<textPath xlink:href="#path">
			testtesttesttest
		</textPath>
	</text>
</svg>

css

#path {
	stroke:#808080;
	fill:none;
	stroke-width:1;
	stroke-dasharray:2000;
	stroke-dashoffset:2000;
	-webkit-animation: line 3s ease-in 0s infinite alternate;
	animation: line 3s ease-in 0s infinite alternate;
}

#text {
	stroke:#ffccff;
	fill:#000;
	stroke-width:1;
	stroke-dasharray:5000;
	stroke-dashoffset:5000;
	-webkit-animation: txt 10s ease-out 3s infinite alternate;
	animation: txt 10s ease-out 3s infinite alternate;
}

@-webkit-keyframes line {
	0% { stroke-dashoffset:2000; }
	100% { stroke-dashoffset:0; }
}
@keyframes line {
	0% {stroke-dashoffset:2000; }
	100% { stroke-dashoffset:0; }
}

@-webkit-keyframes txt {
	0% { stroke-dashoffset:5000; }
	100% { stroke-dashoffset:0; }
}
@keyframes txt {
	0% { stroke-dashoffset:5000; }
	100% { stroke-dashoffset:0; }
}

ついで、ポトフのキービジュアルもSVGにしてみた。

Hisako Haradahisakoharada.com