animation-name 속성을 사용하여 애니메이션을 호출하는 방법은 무엇입니까? CSS 애니메이션 사용 가이드

CSS 스타일에서는 애니메이션을 사용하기 전에 @keyframes를 사용하여 애니메이션을 정의해야 합니다. 그러나 키프레임을 사용하여 정의된 애니메이션은 애니메이션 효과를 얻기 위해 실제로는 애니메이션 이름 속성이 필요하지 않습니다. , 그러면 CSS 스타일에서 animation-name 속성을 사용하여 어떻게 구현합니까? animation-name 속성을 사용하여 애니메이션을 호출하는 방법을 요약해 보겠습니다. CSS 애니메이션 사용의 전체 목록입니다.

애니메이션 효과를 구현하기 전에 먼저 애니메이션 이름 속성을 이해해야 합니다.

#🎜 🎜#animation-name 속성 구문: animation-name: animation name;

설명: animation-name 속성을 사용하여 대화를 정의하는 경우 키프레임을 사용하여 동일한 이름과 크기를 지정해야 합니다. 구별되어야 하며, 불일치가 있는 경우에는 아무런 효과가 없을 수 있습니다. 다른 브라우저와의 호환성을 위해 앞에 웹킷 접두어를 추가할 수 있습니다.

코드는 다음과 같습니다:

<style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            0%{border-radius:0;}
            50%{border-radius:50px; -webkit-transform:translateX(0);}
            100%{border-radius:50px; -webkit-transform:translateX(50px);}
        }
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>

위 코드에서는 키프레임을 사용하여 두 개의 애니메이션을 정의하지만 animation-name을 사용하여 mytransform을 호출하는 한 mytransform 애니메이션은 적용되지만 mycolor는 적용되지 않습니다. mytransform 애니메이션의 div에서는 속성을 변경하지 않은 채 border-radius 속성 값을 0에서 50px로 변경한 다음 50%에서 100%로 변경합니다. .오른쪽으로 가로로 50px 이동합니다.

많은 학생들이 이런 질문을 할 것입니다. 우리 모두는 마우스가 요소로 이동할 때 애니메이션을 구현하기 위해 hover 의사 클래스를 사용합니다. 처음으로 웹페이지에 애니메이션 효과를 구현하는 방법은 무엇인가요?

사실 이것도 매우 간단합니다. div에서 마우스 포인터가 머무는 위치에서 스타일을 찾아서 제거한 다음 스타일을 div 요소 자체의 스타일로 변경합니다. 페이지가 열리면 즉시 재생되지 않습니다.

위는 animation-name 속성을 사용하여 애니메이션을 호출하는 방법입니다. CSS 애니메이션 사용법에 대한 전체 소개입니다.

CSS3Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 animation-name 속성을 사용하여 애니메이션을 호출하는 방법은 무엇입니까? CSS 애니메이션 사용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!