@keyframes アニメーションで宣言されたキーフレーム ブロックは、appendRule(n) または deleteRule(n) を使用して変更できます。n はキーフレームの完全なセレクターです。キーフレームの内容は findRule(n) で取得できます。
1. 上記のコード:
<!DOCTYPE html>
<head>
<title>通过js脚本编辑@keyframes动画</title>
<style>
.qq {
width: 200px;
height: 200px;
/* 指定动画名称 */
animation-name: myAnimation;
/* 定义动画的时长 */
animation-duration: 5s;
}
@keyframes myAnimation {
from {
background-color: blue;
}
to {
background-color: red;
}
}
</style>
</head>
<body>
<div class="qq"></div>
<script type="text/javascript">
let myRules = document.styleSheets[0].cssRules;
let keyframesRule = myRules[1]; // a CSSKeyframesRule
//获取指定的关键帧的选择符和内容
let aRule = keyframesRule.findRule("from").cssText;
console.log(aRule);//0% { background-color: blue; }
//删除from关键帧
keyframesRule.deleteRule("from");
//在动画末尾添加50%关键帧
keyframesRule.appendRule("50% {background-color: green}");
</script>
</body>
</html>
2. コードの説明
最初に let myRules = document.styleSheets[0].cssRules; を渡して、すべての CSS のすべてのコンテンツを取得します。
この例で定義されているアニメーションは<style></style>2 番目なので、 let keyframesRule = myRules[1]; を使用して @keyframes アニメーションを取得します。
定義されたアニメーションを取得するのは簡単です。keyframesRule.findRule(“from”).cssText; ステートメントの場合、keyframesRule は定義されたキーフレーム アニメーションであり、返される結果は一致するキーフレームです。このステートメントは 0% {background-color: blue; } を返します (from は 0%、to は 100%)
keyframesRule.deleteRule("from"); は最後の from キーフレームを削除しますが、複数の from キーフレームがある場合は最後のものが削除されます。ここではfromキーフレームを削除していますが、最初は背景色が青ではなくデフォルトの白になっています。
keyframesRule.appendRule("50% {background-color: green}"); は、@keyframes ブロックの最後のキーフレームの後に 50% のキーフレームを追加します。(@keyframes ブロック内のキーフレームは昇順に並べ替える必要はありません。通常、開発者は便宜上、キーフレームをこの順序で記述しますが、順序どおりに記述されていなくても問題ありません)。実行後、div が最初に青から緑に変化し、最後に赤に変わることがわかります (注: この例の from はコードの前の行によって削除されています。最初に青から緑に変化し、最後に赤に変化することを確認する必要があります)赤の効果に変わります。keyframesRule.deleteRule("from"); コメントアウトする必要があります)