마우스 아웃 시 CSS 키프레임 애니메이션을 반전시키는 방법은 무엇입니까?

키프레임을 사용하여 마우스를 올려 놓은 후 마우스를 놓았을 때 애니메이션 반전

귀하가 마우스를 놓으면 회전 애니메이션을 되돌리는 솔루션을 찾고 있습니다. 요소. 기존 CSS 변환을 사용하는 것이 가능하지만 @keyframes 애니메이션으로 구현할 때 문제가 발생했습니다.

최적의 솔루션은 키프레임 내에서 "to" 및 "from" 값을 모두 사용하는 것입니다. 수정된 코드는 다음과 같습니다.

@keyframes in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

그러나 브라우저 호환성을 고려하는 것이 중요합니다. CSS3는 널리 지원되지만 최대 호환성을 위해 공급업체 접두사를 사용하는 것이 좋습니다.

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

@-moz-keyframes in { /* Firefox */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-moz-keyframes out { /* Firefox */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

@keyframes in { /* Default fallback */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out { /* Default fallback */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

위 내용은 마우스 아웃 시 CSS 키프레임 애니메이션을 반전시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!