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