CSS에서 column-width(열 너비) 속성에 애니메이션을 적용하려면 @keyframes 규칙과 animation 속성을 함께 활용하면 됩니다. 아래 예제 코드를 실행하면 열 너비가 일정 주기마다 자연스럽게 변화하는 것을 확인할 수 있습니다.
예제
<!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;
column-width: 200px;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-rule-color: black;
column-width: 150px;
}
}
</style>
</head>
<body>
<h2>column-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-width: 200px; — 각 열의 초기 너비를 200px로 지정합니다.
- column-rule: 10px inset orange; — 열과 열 사이에 오렌지색 입체 구분선을 추가합니다.
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 주기로 무한 반복 실행합니다.
- @keyframes myanim { 20% { ... } } — 애니메이션이 진행된 시점의 20% 지점에서
column-width를 150px로 줄이고, 동시에box-shadow,bottom,column-rule-color도 함께 변화시켜 더욱 역동적인 효과를 연출합니다.
이처럼 @keyframes 안에서 원하는 진행 시점(%)별로 column-width 값을 다르게 설정하기만 하면, 별도의 JavaScript 없이도 순수 CSS만으로 열 너비 애니메이션을 손쉽게 구현할 수 있습니다.