SVGアニメーション – CSS要素を使う(2) – transitionsプロパティの使用
前回の投稿ではCSS要素の「animation」プロパティを使ってSVG画像をアニメーションしました。
今回は別なプロパティの「transitions」プロパティを使ってみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.anim1 {
stroke: #000000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 10;
transition: fill, 0s, 2s;
}
.anim1:hover {
stroke: #ff00cc;
stroke-dasharray: 500;
stroke-width: 10;
}
</style>
</head>
<body>
<svg width="500" height="300" viewBox="0 0 500 300">
<polygon
class="anim1"
points="10 15 25 120 50 180 75 95 98 250 105 140 130 175 135 210 150 135"
stroke="#000000"
stroke-width="1"
fill="none"
/>
</svg>
</body>
</html>
画面にアクセスすると多角形が表示されます。
多角形(polygon)の線分にマウスカーソルを乗せると、下記のhover定義されたstyleにpolygonがアニメーション変化します。
.anim1:hover {
stroke: #ff00cc;
stroke-dasharray: 500;
stroke-width: 10;
}
また、アニメーション変化の時間指定は
.anim1 {
stroke: #000000;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
stroke-width: 10;
transition: fill, 0s, 2s;
}
側にある
transition: fill, 0s, 2s;
で指定しています。
表示例(多角形上にマウスカーソルを乗せた場合)
本来は線分にマウスカーソルを乗せる方法ではなく、カーソルを乗せる領域を工夫してカーソルで選択しやすくします。