SVGアニメーション – Web Animations API を使う – Element.animate()メソッドの options – pseudoElement
pseudoElement はDOMに記述された疑似要素セレクターの文字列(::before、::after、::marker等)に、アニメーションを適用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.pseudoElementTest {
color: #000000;
font-size: 1.2rem;
}
.pseudoElementTest::before {
content: "test1234";
}
</style>
</head>
<body>
<div class="pseudoElementTest"></div>
<input type="button" id="button_test1" value="pseudoElementTest1">
<script>
// DOM要素を取得
let pseudoElementTest = document.querySelector(".pseudoElementTest");
// アニメーション用
let animation1;
// アニメーション1 keyframesの定義
const keyframes1 = [
{color: '#333333', width: 200},
{color: '#FF9900', width: 200},
{color: '#FF5566', width: 200}
];
// botton1
let dom_test1 = document.getElementById('button_test1');
// botton1押下
dom_test1.addEventListener('click', () => {
if (animation1) {
animation1.pause(); // アニメーション1を一時停止
}
// アニメーションのオプションを取得
const currentOptions = {
duration : 3000,
pseudoElement : '::before',
iterations : Infinity
};
// オプションを再設定する
animation1 = pseudoElementTest.animate(keyframes1, currentOptions);
// アニメーション1の再生と停止
animation1.play();
}, false);
</script>
</body>
</html>
画面アクセスしてボタンを押下すると、cssの
.pseudoElementTest::before {
content: "test1234";
}
に定義した要素(画面上ではtest1234と表示されます)の「::before」が指定されているcss要素に対してアニメーションされることがわかります。
この時、事前に定義されている「pseudoElementTest」のcss定義には影響を及ぼしていないことがわかります。
.pseudoElementTest {
color: #000000;
font-size: 1.2rem;
}