CSS에서 padding(패딩) 속성에 애니메이션 효과를 적용하고 싶다면 @keyframes 규칙과 animation 속성을 함께 활용하면 됩니다. 요소의 안쪽 여백이 부드럽게 변화하도록 설정할 수 있으며, 아래 예제 코드를 실행하여 직접 결과를 확인해 보세요.
예제 코드
아래 예제는 350×150px 크기의 div 요소에 주황색 외곽선을 지정하고, 3초 주기로 무한 반복되는 애니메이션을 통해 패딩 값이 변화하도록 구현한 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
outline: 2px solid orange;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
padding: 20px;
}
}
</style>
</head>
<body>
<h1>CSS padding property</h1>
<div> </div>
</body>
</html>
코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 동안 실행하며, 무한히(infinite) 반복합니다.
- @keyframes myanim — 애니메이션의 중간 지점(50%)에서 패딩 값을 20px로 변경합니다. 시작 시점에는 기본 패딩 값(0)이 적용되고, 진행률 50% 지점에서 20px까지 늘어난 뒤 다시 원래대로 돌아갑니다.
- outline: 2px solid orange; — 패딩 변화를 시각적으로 확인할 수 있도록 주황색 외곽선을 추가했습니다.
이처럼 padding은 애니메이션이 가능한 속성이므로, @keyframes 내에서 원하는 진행률 지점마다 다른 패딩 값을 지정하면 자연스러운 여백 변화 효과를 만들 수 있습니다.