Mouseout에서 역방향 CSS 애니메이션을 만드는 방법은 무엇입니까?

마우스 오버 후 반전 애니메이션

CSS 애니메이션을 사용하여 마우스 아웃 시 반전 애니메이션을 만들려고 시도하는 동안 문제가 발생했습니다. . 문제를 자세히 조사하고 최적의 솔루션을 제공하겠습니다.

초기 코드에서는 "회전" 속성이 있는 간단한 CSS 변환 애니메이션을 사용했고 "in" 및 "out" 키프레임에는 "to"가 있었습니다. 회전을 정의하는 값입니다. 그러나 @keyframes 애니메이션을 사용하는 경우 전환 효과를 생성하려면 키프레임 내에서 "from" 및 "to" 값을 모두 지정해야 합니다.

반복 및 애니메이션에 대한 요구 사항을 통합하는 최적의 솔루션은 다음과 같습니다. @keyframes 규칙을 다음과 같이 수정합니다.

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

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

이 코드를 사용하면 "in" 키프레임이 0회전에서 시작하여 360도로 이동합니다. 회전하는 반면 "아웃" 키프레임은 360도 회전에서 시작하여 0 회전으로 돌아가 마우스 아웃 시 원하는 반대 효과를 생성합니다.

브라우저 호환성 고려 사항:

CSS3은 보편적으로 완전히 구현되지 않았다는 점을 기억하십시오. 브라우저 간 호환성을 보장하려면 브라우저마다 다른 @keyframes 구문을 사용해야 할 수도 있습니다.

• Chrome, Safari(v5): @-webkit-keyframes
• Firefox(v16) ): @keyframes (v5-15: @-moz-keyframes)
• Opera (v15-22): @-webkit-keyframes (v12: @-o-keyframes)
• Internet Explorer(v10): @keyframes

코드를 더욱 향상하려면 CSS 규칙 내에서 애니메이션 기간과 반복 횟수를 지정할 수도 있습니다.

다음은 코드 스니펫입니다. 다음과 같은 개선 사항을 구현합니다.

.class {
    animation-name: out;
    animation-duration: 2s;
}

.class:hover {
    animation-name: in;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

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

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

위 내용은 Mouseout에서 역방향 CSS 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!