CSS에서 padding-right 속성에 애니메이션을 적용하면 요소의 오른쪽 안쪽 여백이 부드럽게 변화하는 효과를 만들 수 있습니다. @keyframes 규칙과 animation 속성을 함께 사용하면 되는데요, 아래 예제 코드를 실행해 직접 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
outline: 3px solid orange;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
padding-right: 60px;
}
}
</style>
</head>
<body>
<h1>CSS padding-right 속성</h1>
<div> </div>
</body>
</html>코드 설명
위 예제가 어떻게 동작하는지 핵심 부분만 살펴보겠습니다.
- @keyframes myanim: 애니메이션의 중간 상태를 정의합니다. 전체 진행 시간의 30% 지점에서
padding-right값이 60px로 변경됩니다. - animation: myanim 3s infinite: 정의한 키프레임 애니메이션을 3초 동안 한 번 재생하고, 이를 무한히 반복하도록 설정합니다.
- outline: 3px solid orange: 주황색 테두리를 추가해 padding 값이 변할 때 요소 내부 공간의 변화를 눈으로 쉽게 확인할 수 있도록 했습니다.
애니메이션이 재생되면 div 요소의 오른쪽 안쪽 여백이 점차 늘어났다가 원래 상태로 돌아오는 것을 반복적으로 확인할 수 있습니다. 이와 같은 방식은 버튼 hover 효과나 콘텐츠 간격 조절 등 다양한 UI 인터랙션에 활용할 수 있습니다.