더북(TheBook)

예제 소스 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로 늘었다 줄어든다

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