CSS3에서 키프레임(keyframe) 애니메이션을 만들려면 개별 키프레임을 정의해야 합니다. 키프레임은 CSS3 애니메이션의 중간 단계를 제어하는 역할을 하며, @keyframes 규칙을 사용해 애니메이션이 시작부터 끝까지 어떻게 변화할지 지정할 수 있습니다.
CSS3 키프레임 애니메이션의 기본 구조
키프레임 애니메이션은 크게 두 부분으로 구성됩니다.
- animation 속성: 요소에 적용할 애니메이션의 이름, 지속 시간, 반복 횟수 등을 설정합니다.
- @keyframes 규칙: 애니메이션의 각 단계별 스타일 변화를 정의합니다.
예제 코드
다음은 CSS3를 사용해 키프레임 애니메이션을 만드는 예제입니다. 사각형이 오른쪽으로 이동하면서 원으로 변형되는 애니메이션입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(218, 78, 36);
border: 4px solid rgb(0, 0, 0);
position: relative;
animation: circleMove 5s infinite;
}
@keyframes circleMove {
from {
left: 0px;
border-radius: 0px;
}
to {
left: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h1>CSS3 키프레임 예제</h1>
<div></div>
</body>
</html>코드 설명
animation: circleMove 5s infinite;— 'circleMove'라는 이름의 애니메이션을 5초 동안 무한히 반복 실행합니다.@keyframes circleMove— 애니메이션의 시작(from)과 끝(to) 상태를 정의합니다.- 시작 시점에는
left: 0px,border-radius: 0px로 모서리가 뾰족한 사각형 상태입니다. - 종료 시점에는
left: 200px,border-radius: 50%로 오른쪽으로 이동하면서 원 형태로 변합니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
애니메이션이 진행되면 일정 시간 후 사각형이 아래와 같이 원으로 변형됩니다.
추가 팁
from과 to 대신 백분율(예: 0%, 50%, 100%)을 사용하면 더 세밀한 중간 단계를 제어할 수 있습니다. 또한 animation-timing-function 속성을 활용하면 애니메이션의 가속과 감속 효과도 조절할 수 있습니다.