더 이상 사용되지 않는 SMIL 애니메이션을 CSS 또는 웹 애니메이션으로 대체하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

더 이상 사용되지 않는 SMIL 애니메이션을 CSS 또는 웹 애니메이션으로 대체하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-10-25 17:34:32

원래의

521명이 탐색했습니다.

How Can I Replace Deprecated SMIL Animations with CSS or Web Animations?

호버 효과: CSS 애니메이션 또는 웹 애니메이션

문제:
SMIL의 애니메이션 태그는 더 이상 사용되지 않으며 CSS 호버 전환은 이를 대체하기 위해 구현되었습니다.

해결책:
설정 태그를 제거하고 CSS를 element_tpl:hover 의사 클래스에 추가합니다.

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

로그인 후 복사

확장 효과 변경

문제:
변경이 커밋되면 요소의 크기가 몇 배로 조정되도록 애니메이션을 적용합니다.

해결책:
다음을 고려하세요. 다음 옵션:

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>

로그인 후 복사

웹 애니메이션: 웹 애니메이션 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>

로그인 후 복사

클릭 시 크기 조정 및 축소

문제:
클릭 시 요소를 확대 및 축소하도록 애니메이션화합니다.

해결책:

CSS 전환: CSS 전환을 사용하여 mousedown 및 mouseup 이벤트에서 크기 변경을 트리거합니다.

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

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

로그인 후 복사

웹 애니메이션: 웹 애니메이션 사용 클릭 이벤트를 처리하고 이에 따라 요소 크기를 조정하는 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>

로그인 후 복사