CSS에서 top 속성에 애니메이션을 적용하면 요소를 위아래로 부드럽게 움직이는 효과를 만들 수 있습니다. top 속성은 position 값이 absolute, relative, fixed, sticky인 요소에만 적용되므로, 애니메이션 작업 전에 반드시 위치 속성을 함께 설정해야 합니다.
아래 예제는 @keyframes 규칙과 animation 속성을 사용하여 주황색 박스가 위에서 아래로 반복해서 이동하는 애니메이션을 구현한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
width: 300px;
height: 200px;
background-color: orange;
color: white;
top: 0;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
top: 300px;
}
}
</style>
</head>
<body>
<h1>CSS top property</h1>
<div>
<h1>This is demo text!</h1>
</div>
</body>
</html>코드 설명
- position: absolute; —
top속성이 정상적으로 작동하도록 요소의 위치 기준을 설정합니다. - top: 0; — 애니메이션 시작 시점의 요소 위치를 화면 상단으로 지정합니다.
- animation: myanim 3s infinite; —
myanim이라는 키프레임 애니메이션을 3초 동안 실행하며, 무한히 반복합니다. - @keyframes myanim { 30% { top: 300px; } } — 애니메이션 진행률 30% 지점에서 요소가 위쪽에서 300px 떨어진 위치로 이동합니다.
이처럼 @keyframes 안에서 진행률별로 top 값을 다르게 지정하면, 원하는 타이밍에 따라 요소를 자유롭게 움직이는 애니메이션을 쉽게 만들 수 있습니다.