개요
CSS에서 transform 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용합니다. @keyframes는 애니메이션 진행 과정 중 특정 시점(예: 30%)에서의 스타일 변화를 정의하고, animation 속성은 해당 애니메이션을 요소에 연결하며 지속 시간을 설정합니다.
아래 예제는 주황색 배경의 div 요소가 3초에 걸쳐 120도 회전하는 애니메이션을 구현한 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
border: 2px solid blue;
width: 300px;
height: 400px;
background-color: orange;
animation: myanim 3s;
}
@keyframes myanim {
30% {
transform: rotate(120deg);
}
}
</style>
</head>
<body>
<div>
<h1>Demo</h1>
</div>
</body>
</html>코드 설명
animation: myanim 3s; — div 요소에 myanim이라는 이름의 애니메이션을 3초 동안 실행하도록 지정합니다.
@keyframes myanim — 애니메이션의 30% 지점에서 요소를 120도 회전시키도록 정의합니다. 브라우저는 시작 상태(0%)와 30% 지점, 종료 상태(100%) 사이를 자동으로 부드럽게 보간하여 자연스러운 움직임을 만들어 줍니다.
이처럼 @keyframes 안에서 transform 값을 단계별로 정의하면 이동(translate), 확대·축소(scale), 회전(rotate), 기울이기(skew) 등 다양한 변형 효과를 손쉽게 애니메이션으로 구현할 수 있습니다.