4.transition 과도와 애니메이션

1、transition
CSS3의 전환 기능은 버터와 같아서 CSS의 일부 변화를 매끄럽게 할 수 있다.기본 CSS 변환은 클라이언트에서 JavaScript와 Flash를 사용하는 것보다 훨씬 적은 리소스를 처리하기 때문에 더욱 매끄럽습니다.
1. 용법 종합 문법:transition:width1s1slinear,height1s1slinear;
분리 분석:

transition-property: width,font-size;/*      */
transition-duration: 1s;/*       */
transition-delay: 1s;/*    ，             */
transition-timing-function: linear;/*      .  */

transition-timing-function 정보:

/*transition: 1s linear;   */
/*transition: 1s ease;    （   ，   ）*/
/*transition: 1s ease-in;    */
 transition: 1s ease-out; /*   */

2. 한계
transition의 장점은 간단하고 사용하기 쉽다는 데 있지만, 몇 가지 큰 한계가 있다.
(1)transition은 이벤트 트리거가 필요하기 때문에 웹 페이지를 불러올 때 자동으로 발생할 수 없습니다.(2)transition은 일회성으로 반복적으로 발생할 수 없으며 반복적으로 발생할 수 없다.(3)transition은 시작 상태와 끝 상태만 정의할 수 있고 중간 상태는 정의할 수 없다. 즉, 두 가지 상태만 정의할 수 있다.(4) 하나의transition규칙은 하나의 속성의 변화만 정의할 수 있고 여러 속성과 관련될 수 없다.CSS Animation은 이러한 문제를 해결하기 위해 제시된 것입니다.
2、animation
CSS3의 애니메이션 속성은 Flash에서 애니메이션을 만드는 것처럼 키 프레임을 제어하여 애니메이션의 한 걸음 한 걸음 더욱 복잡한 애니메이션 효과를 실현할 수 있다.ainimation 애니메이션 효과는 주로 두 부분으로 구성된다. 1) Flash 애니메이션과 유사한 프레임을 통해 애니메이션을 설명한다.2) 애니메이션의 키 프레임 선언을 animation 속성에서 호출합니다.
Note:animation 속성은 현재 위치에서 대부분의 브라우저에서 지원되지만, 브라우저 접두사를 추가해야 합니다!브라우저 접두사를 추가해야 합니다!브라우저 접두사를 추가해야 합니다!
1. 사용법animation:move4s 1s linear infinite alternate;//종합 문법
따로따로 분석하다

animation-name: move; /*          */
animation-duration: 4s;/*         */
animation-delay: 1s;/*    ，          */
animation-timing-function: linear;/*      */
animation-iteration-count: infinite;/*    ，     ，    ，infinite    */
animation-direction: alternate;/*        normal  ，alternate      */

animation-play-state: running;//    
animation-play-state: paused;//    

2、애니메이션 쓰기!!!!!브라우저 접두사 붙이기!!!!!브라우저 접두사 붙이기!!!!!브라우저 접두사 붙이기!!!!!브라우저 접두사 붙이기!!!!!브라우저 접두어 추가하기

 @-webkit-keyframes move {
            0%{left:0; top: 0;}/*          ，    */
            25%{left:400px; top: 0;}/*   0 25%    */
            50%{left:400px; top: 300px;}
            75%{left:0; top: 300px;}
            0%{left:0; top: 0;} /*    ，       ，     */
        }

/*          */
        @-webkit-keyframes play {
            from{ left:0; top: 0;}/*   0%*/
            to{ left: 400px; top: 0; }/*   100%*/
        }

3. 배수 확대 scale(transition에 적용)

@-webkit-keyframes move {
            25%{transform: scale(1.2);}//scale         1.
            50%{transform: scale(1.5);}
            75%{transform: scale(1.2);}
        }