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