예제 소스 Exercise/10장/2_transition/style.css

    #animation {
        width: 300px;
        height: 300px; 
        background-color: yellow;
        animation-name:changeWidth;        
        animation-duration: 3s;            
        animation-iteration-count: 6;      
        animation-timing-function: ease;   
        animation-direction: alternate;    
        animation-delay: 2s;                  
    }
    
    /* @keyframes 옆에는 animation-name 속성의 속성값을 입력합니다. */
    @keyframes changeWidth{                
       from { width: 300px;}
       to { width: 600px;}
    }

     

    그림 10-7 박스 크기가 300px에서 600px로 늘었다 줄어든다

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.