HTML, CSS - Transform과 Animation을 결합할 때

Transform & Animation

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

box1 이라고 하는 영역에 애니메이션 속성을 입력함. 속성값들을 한 줄로 입력했는데, 각각의 순서는 상관없지만 항상 먼저 나오는 숫자가 duration이고, 나중에 나오는 숫자가 delay라는 것만 알면 됨. 위에서는 rotation이라고 하는 애니메이션 이름을 지정하고, duration은 1500ms라고 해서 (1000ms = 1초) 1.5초 동안 동작하게, linear로 일정한 속도를 적용하고, 반복횟수는 infinite, 즉 무한으로 설정, alternate로 from->to, 그리고 다시 from->to로 이동하는 반복 효과를 주겠다는 뜻.

 

@keyframes에는 rotation이라고 하는 애니메이션의 이름을 옆에다 써줬고, transform을 사용해서 rotate로 -10도 만큼 회전시켜서 시작하고, 10도 만큼 회전되서 끝나게 설정함.

 

 

 

prefix 작성 시 유의할 점

Animation도 CSS3에 새롭게 등장한 속성이라서 prefix를 앞에 달 수 있음. 그리고 prefix를 달게 되면, 꼭 @keyframes도 동일하게 prefix를 함께 달아줘야 함. prefix가 달려있는 애니메이션을 2개 작성했다고 한다면, @keyframes도 prefix가 달려있는 걸로 2개를 작성해줘야 함. 만약 prefix를 달지 않았다면, prefix 없는 것들끼리 연동시켜주는 별도의 @keyframes 를 추가적으로 작성해줘야 함. 

.box1 {
    -webkit- animation: rotation 1500ms linear infinite alternate;
}

@-webkit-keyframes rotation {
    from {-webkit- transform: rotate(-10deg); }
    to {-webkit- transform: rotate(10deg); }
}

그리고 @keyframes 에 -webkit-이라고 하는 prefix를 달았다고 하더라도, @keyframes 안의 transform까지 prefix가 같이 설정되는 게 아님. 그래서 각각의 transform 앞에도 prefix를 꼭 입력해줘야 함.