CSS에서 column-gap 속성에 애니메이션을 적용하면 다단(multi-column) 레이아웃의 열 사이 간격이 부드럽게 변화하는 효과를 만들 수 있습니다. @keyframes 규칙 안에 column-gap 값을 지정하고, 요소에 animation 속성을 설정하면 됩니다.
예제 코드
아래 예제는 4개의 단으로 나뉜 텍스트 영역에서 열 간격이 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-count: 4;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-gap: 70px;
}
}
</style>
</head>
<body>
<h2>column-gap 속성 애니메이션 실행</h2>
<div>데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다! 데모 텍스트입니다! 데모 텍스트입니다!
데모 텍스트입니다!
</div>
</body>
</html>코드 설명
- column-count: 4 — 텍스트를 4개의 단으로 배치합니다.
- @keyframes myanim — 애니메이션의 20% 지점에서
column-gap이 70px로 늘어나도록 정의합니다. - animation: myanim 3s infinite — 3초 동안의 애니메이션이 무한히 반복됩니다.
코드를 실행하면 박스가 위아래로 움직이는 동시에 열 사이의 간격이 자연스럽게 넓어졌다가 좁아지는 것을 확인할 수 있습니다.