CSS에서 padding-left 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 이 방법을 활용하면 요소의 왼쪽 안쪽 여백이 부드럽게 변화하는 동적 효과를 만들 수 있습니다.
핵심 개념 정리
애니메이션을 구현하는 기본 흐름은 다음과 같습니다.
- @keyframes: 애니메이션이 진행되는 동안 특정 시점(예: 50%)의 스타일 상태를 정의합니다.
- animation 속성: 애니메이션 이름, 지속 시간, 반복 횟수 등을 설정하여 요소에 적용합니다.
- padding-left: 왼쪽 안쪽 여백 값이 애니메이션 과정에서 자연스럽게 전환됩니다.
예제 코드
아래 예제는 3초 동안 무한 반복되는 애니메이션을 통해 div 요소의 왼쪽 패딩 값을 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 150px;
outline: 3px solid orange;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
padding-left: 20px;
}
}
</style>
</head>
<body>
<h1>CSS padding-left 속성</h1>
<div> </div>
</body>
</html>코드 작동 원리
위 코드가 실행되면 다음과 같은 순서로 애니메이션이 진행됩니다.
- div 요소는 350px × 150px 크기로 설정되고, 주황색 3px 두께의 외곽선(outline)이 표시됩니다.
animation: myanim 3s infinite;선언으로 인해 'myanim'이라는 이름의 애니메이션이 3초 동안 한 번 실행되며, 무한히 반복됩니다.- 애니메이션이 전체 주기의 50% 지점에 도달하면
padding-left값이 20px로 변화하고, 다시 원래 상태로 되돌아갑니다.
브라우저에서 이 코드를 직접 실행해 보면, 요소 내부의 콘텐츠가 왼쪽 여백의 변화에 따라 좌우로 움직이는 것을 확인할 수 있습니다. 이러한 기법은 버튼 호버 효과나 강조 애니메이션 등 다양한 UI 디자인에 응용할 수 있습니다.