CSS에서 column-count 속성은 요소 내 텍스트가 나뉘는 열의 개수를 지정합니다. 이 속성에 애니메이션을 적용하면 화면 크기나 시간의 흐름에 따라 텍스트 열이 자연스럽게 늘어나거나 줄어드는 효과를 만들 수 있습니다.
column-count 속성 애니메이션 예제
아래 코드는 @keyframes 규칙과 함께 column-count 속성에 애니메이션을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-count: 4;
}
}
</style>
</head>
<body>
<h2>column-count 속성으로 애니메이션 실행</h2>
<div>데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!</div>
</body>
</html>코드 설명
1. 기본 스타일 설정
div 요소에는 너비 400px, 높이 300px가 지정되어 있고, 빨간색 테두리와 흰색 배경이 적용됩니다. animation: myanim 3s infinite; 선언을 통해 myanim이라는 이름의 애니메이션이 3초 동안 무한 반복됩니다.
2. @keyframes 규칙 정의
@keyframes myanim 안에서 전체 애니메이션 구간 중 20% 지점에 다음 세 가지 변화를 정의했습니다.
- bottom: 100px — 요소가 위로 이동합니다.
- box-shadow: 30px 45px 70px orange — 주황색 그림자 효과가 나타납니다.
- column-count: 4 — 텍스트가 4개의 열로 나뉩니다.
애니메이션이 진행되면서 원래 상태와 20% 지점의 상태 사이를 부드럽게 전환하므로, 열 개수가 점진적으로 변화하는 모습을 확인할 수 있습니다.
참고 사항
column-count는 애니메이션이 가능한(animatable) 속성이므로 CSS transition이나 keyframes와 함께 사용할 수 있습니다. 다만 열 개수는 정수 단위로 변화하기 때문에 일부 브라우저에서는 값이 계단식으로 바뀌는 것처럼 보일 수 있습니다. 더 부드러운 전환을 원한다면 column-width나 columns 축약 속성을 함께 고려해 보세요.