CSS에서 bottom 속성에 애니메이션 효과를 적용하면 요소를 세로 방향으로 부드럽게 움직이는 동적 화면을 만들 수 있습니다. bottom 속성은 position 값이 absolute, relative, fixed 중 하나일 때만 작동한다는 점을 기억하세요.
핵심 포인트
- position 필수 설정:
bottom애니메이션이 적용되려면 요소에position: absolute;등 위치 지정 값이 반드시 필요합니다. - @keyframes 활용: 애니메이션의 변화 지점을
@keyframes규칙으로 정의하고, 원하는 진행률(%)마다bottom값을 다르게 지정합니다. - 반복 재생:
animation속성에infinite를 사용하면 애니메이션이 무한히 반복됩니다.
예제 코드
아래 예제는 노란색 배경의 div 요소가 위아래로 계속 움직이는 애니메이션입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: yellow;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
}
@keyframes myanim {
20% {
bottom: 100px;
}
}
</style>
</head>
<body>
<h2>bottom 속성 애니메이션 실행</h2>
<div></div>
</body>
</html>
코드 설명
animation: myanim 3s infinite; 구문은 이름이 myanim인 애니메이션을 3초 동안 무한 반복하도록 설정합니다. @keyframes myanim 내부의 20% 지점에서 bottom 값이 30px에서 100px로 변경되면서 요소가 위로 이동했다가 다시 제자리로 돌아오는 효과가 나타납니다. 진행률 구간을 더 추가하면 더욱 복잡하고 자연스러운 움직임도 연출할 수 있습니다.