CSS에서 column-rule-width 속성에 애니메이션을 적용하면 다단(multi-column) 레이아웃의 열 사이 구분선 두께가 부드럽게 변화하는 효과를 만들 수 있습니다. @keyframes 규칙을 활용해 특정 시점(예: 20%)에 구분선 너비를 변경하면, 브라우저가 자동으로 중간 값을 보간하여 자연스러운 애니메이션을 완성합니다.
아래 예제 코드를 실행하면 column-rule-width 속성에 애니메이션이 적용되는 모습을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 600px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
column-rule: 10px inset orange;
column-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
column-rule-width: 20px;
}
}
</style>
</head>
<body>
<h2>column-rule-width 속성에 애니메이션 적용하기</h2>
<div>This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text!
This is demo text!
</div>
</body>
</html>코드 설명
위 코드의 핵심 요소는 다음과 같습니다.
- column-count: 4 — 텍스트를 4개의 단으로 나누어 다단 레이아웃을 구성합니다.
- column-rule: 10px inset orange — 각 단 사이에 주황색(inset 스타일) 구분선을 10px 두께로 설정합니다.
- @keyframes myanim — 애니메이션의 20% 지점에서
column-rule-width를 20px로 변경하고, 동시에column-rule-color를 검정색으로 바꿉니다. - animation: myanim 3s infinite — 3초 주기로 애니메이션이 무한 반복됩니다.
애니메이션이 실행되면 열 구분선의 두께가 10px에서 20px로 부드럽게 늘어나며 색상도 함께 전환되는 것을 확인할 수 있습니다. 이 기법은 다단 콘텐츠에 시각적 강조 효과를 더할 때 유용하게 활용할 수 있습니다.