[CSS] Transform 과 Animation을 결합할 때 주의사항

Tranform & Animation

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

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

 

prefix 작성 시 유의 사항

.box {
    animation: rotation 3s linear 1s 6 alternate;
}

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

animation 앞에 prefix가 달려있다면 (ex) -webkit-animation

keyframes 또한 쌍을 이뤄야 한다.

• 동일한 prefix가 달린 keyframes를 작성해주어야 함 (ex) @-webkit-keyframes
• 동일한 prefix가 달린 속성으로 작성해주어야 한다. (ex) -webkit-transform