CSS의 columns 속성은 요소 안의 텍스트를 여러 단(column)으로 나누어 배치할 때 사용합니다. 이 속성에 애니메이션을 적용하면 단의 개수와 너비가 부드럽게 변화하는 시각적 효과를 만들 수 있습니다.
예제
아래 코드는 @keyframes 규칙을 활용해 columns 속성에 애니메이션을 적용한 예제입니다. 실행하면 3초 주기로 무한 반복되며, 단의 개수와 너비가 자연스럽게 전환됩니다.
<!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;
columns: 70px 6;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column rule color property</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>
코드 핵심 포인트
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 무한히 반복 실행합니다.
- @keyframes myanim — 애니메이션이 20% 진행된 시점의 스타일 변화를 정의합니다.
- columns: 70px 6; — 각 단의 최소 너비를 70px로 지정하고, 최대 6개의 단으로 텍스트를 나눕니다.
- column-rule-color: black; — 단과 단 사이의 구분선 색상을 검정으로 변경합니다.
- column-rule: 10px inset orange; — 초기 상태에서는 10px 두께의 오렌지색 입체(inset) 스타일 구분선이 표시됩니다.
이처럼 columns, column-count, column-rule 등 다단 레이아웃 관련 속성은 @keyframes와 함께 사용하면 동적인 레이아웃 전환 효과를 쉽게 구현할 수 있습니다.