非推奨の SMIL アニメーションを CSS または Web アニメーションに置き換えるにはどうすればよいですか?

ホバー効果: CSS アニメーションまたは Web アニメーション

問題:
SMIL の animate タグは廃止されており、CSS ホバー トランジションはそれを置き換えるために実装されました。

解決策:
設定されたタグを削除し、CSS を element_tpl:hover 疑似クラスに追加します:

<code class="css">.element_tpl:hover {
    stroke-opacity: 0.5;
}</code>

スケーリング効果変更

問題:
コミットされた変更時に要素をアニメーション化して数回スケールします。

解決策:
次のオプション:

1. CSS アニメーション: CSS キーフレームを使用してスケーリングを実現します:

<code class="css">@keyframes scale-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}</code>

次にアニメーションを要素に適用します:

<code class="css">.element_tpl {
    animation: scale-animation 0.5s infinite alternate;
}</code>

2. Web アニメーション: Web アニメーション API を使用してスケーリングをプログラムで制御します:

<code class="javascript">// Create a new animation
const animation = document.timeline.addAnimation();

// Define keyframes
const keyframes = [
    { transform: 'scale(1)', offset: 0 },
    { transform: 'scale(1.12)', offset: 0.5 },
    { transform: 'scale(1)', offset: 1 }
];

// Apply keyframes to the animation
animation.effect = keyframes;

// Target the element
animation.target = document.querySelector('.element_tpl');</code>

クリック時にスケールアップおよびスケールダウン

問題:
クリック時に要素をアニメーション化して拡大または縮小します。

解決策:

1. CSS トランジション: CSS トランジションを使用して、マウスダウンおよびマウスアップ イベントでスケール変更をトリガーします:

<code class="css">.element_tpl {
    transition: transform 0.2s;
}

.element_tpl:active {
    transform: scale(1.1);
}</code>

2. Web アニメーション: Web アニメーションを使用しますクリック イベントを処理し、それに応じて要素をスケールする API:

<code class="javascript">// Add event listener
document.querySelector('.element_tpl').addEventListener('click', (event) => {

    // Create a new animation
    const animation = document.timeline.addAnimation();

    // Define keyframes
    const keyframes = [
        { transform: 'scale(1)', offset: 0 },
        { transform: 'scale(1.1)', offset: 0.2 },
        { transform: 'scale(1)', offset: 0.4 },
    ];

    // Apply keyframes to the animation
    animation.effect = keyframes;

    // Target the element
    animation.target = event.target;
});</code>

SMIL アニメーションの保存

問題:
SMIL アニメーションを CSS に転送する、またはWeb アニメーション。

解決策:
Eric Willigers が作成した SMIL ポリフィルを使用します: https://github.com/ericwilligers/svg-animation。このポリフィルは SMIL アニメーションを Web アニメーションに変換し、それらを実装する代替方法を提供します。

以上が非推奨の SMIL アニメーションを CSS または Web アニメーションに置き換えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。