붙여 넣은 코드에서 클래스명과 애니메이션 이름을 작성합니다. @keyframes 속성에서 transform 속성을 제외한 나머지 불필요한 코드를 제거합니다.
예제 소스 Exercise/16장/KidsGao/css/animation.css
/******************** *** kitchen *** ********************/ /* 클래스명을 작성합니다. */ #kitchen .steamWrap .bubble1 { animation-name: bubble1; /* 애니메이션 이름을 작성합니다. */ animation-duration: 2000ms; animation-delay: 0ms; animation-fill-mode: forwards; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: 0 0; } @keyframes bubble1 { /* transform을 제외한 나머지 불필요한 코드는 삭제합니다. */ 0% {transform:translate(0px, 0px) } 50% {transform:translate(-87.5px, -150px) } 100% {transform:translate(-100px, -300px) } }