CSS3 애니메이션의 관련 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3 애니메이션의 관련 속성은 무엇입니까?

青灯夜游

풀어 주다： 2022-03-15 17:26:34

원래의

3102명이 탐색했습니다.

애니메이션 관련 속성에는 변형, 변형 원본, 전환, "@keyframes", 애니메이션, 애니메이션 이름, 애니메이션 지속 시간, 애니메이션 지연 등이 포함됩니다.

CSS3 애니메이션의 관련 속성은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에는 변환, 전환, 애니메이션

1, 변환(2D/3D 변환 속성)

의 세 가지 애니메이션이 있습니다.

property	description	CSS
transform	적합 2D 또는 3D 변형 요소의 경우	3
transform-origin	변환된 요소 위치를 변경할 수 있습니다	3
transform-style	3D 공간에서 요소를 중첩하는 방법 지정	3
perspective	3D 요소가 원근감으로 표시되는 방식 지정	3
perspective-origin	3D 요소의 하단 위치 지정	3
backface-visibility	정의 요소는 화면을 향하지 않을 때 표시되어야 합니다	3

2. 이 속성 전환은 속성, 전환 기간, 전환 타이밍 기능, 전환 지연의 약식입니다.

3transition-property 전환에 사용되는 CSS 속성을 설정합니다. 3transition-duration전환이 수행되는 시간을 설정합니다. 3transition-timing-function전환 타이밍 기능을 설정합니다. 3transition-delay전환이 시작되는 시간을 지정하세요. 3 속성 설명 CSS





		3, 애니메이션(애니메이션 속성)

@keyframes @keyframes에 의해 정의된 애니메이션 이름인 애니메이션을 정의합니다. animation-name으로 사용됩니다.

3animation복합 속성. 개체에 적용된 애니메이션 효과를 검색하거나 설정합니다. 3animation-name객체에 적용된 애니메이션 이름을 검색하거나 설정합니다. 애니메이션 이름은 @keyframes3animation으로 정의되므로 @keyframes 규칙과 함께 사용해야 합니다. -durationRetrieval 또는 객체 애니메이션의 지속 시간을 설정3animation-timing-function객체 애니메이션의 전환 유형을 검색하거나 설정3animation-delay검색 또는 설정 객체 애니메이션의 지연 시간3animation-iteration-count객체 애니메이션의 루프 수를 검색하거나 설정합니다3animation-direction객체 애니메이션의 이동 여부를 검색하거나 설정합니다. in the loop3animation-play-state객체 애니메이션 상태 검색 또는 설정3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div {
                width: 50px;
                height: 50px;
                background: red;
                margin: 100px;
                animation: mymove 5s infinite;
                -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            }
 
            @keyframes mymove {
                50% {
                    width: 150px;
                    height: 150px;
                    transform: rotate(360deg);
                }
 
            }
 
            @-webkit-keyframes mymove{  /* Safari and Chrome */
                50% {
                    width: 100px;
                    height: 100px;
                    transform: rotate(360deg);
                }
 
            }
        </style>
    </head>
    <body>
 
        <div></div>
 
    </body>
</html>