@keyframes를 사용하여 마우스 아웃 시 CSS 애니메이션을 반전시키는 방법은 무엇입니까?

마우스 오버 후 반전 애니메이션 구현 방법

웹 디자인에서 애니메이션은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 일반적인 시나리오 중 하나는 요소에 마우스를 올려 애니메이션(일반적으로 회전)을 트리거하는 것입니다. 그러나 마우스를 놓았을 때 애니메이션을 반전시키는 것은 특히 CSS3의 @keyframes를 사용할 때 어려울 수 있습니다.

제공된 CSS 예를 고려하면 마우스를 올리면 요소가 360도 회전하며 목표는 다시 0으로 회전하는 것입니다. 마우스 아웃 시 도. @keyframes 애니메이션을 사용하면 원하는 효과를 얻을 수 없는 것 같습니다.

해결책은 애니메이션 방향 속성을 이해하는 데 있습니다. "To"는 애니메이션의 종료 상태를 나타내고 "from"은 시작 상태를 지정합니다. @keyframes 정의에 "from" 키워드를 통합하면 역방향 애니메이션을 만들 수 있습니다.

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

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

또한 공급업체 접두사를 사용하여 브라우저 간 호환성을 보장할 수 있습니다.

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

애니메이션을 더욱 향상시키려면 애니메이션 방향을 지정하는 것이 중요합니다. 속성:

.class {
    animation-direction: alternate;
}

이렇게 하면 마우스가 요소 경계 밖으로 이동할 때 애니메이션이 "in"에서 "out"으로 원활하게 전환됩니다.

이 접근 방식을 구현하면 마우스 움직임에 정확하게 반응하는 효율적인 역방향 애니메이션. 데모는 다음과 같습니다.

http://jsfiddle.net/JjHNG/35/

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