CSS에서 column-rule-color 속성에 애니메이션 효과를 적용하면 다단 레이아웃의 열 구분선 색상이 부드럽게 변화하는 효과를 만들 수 있습니다. @keyframes 규칙을 활용하면 손쉽게 구현할 수 있습니다.
아래 예제 코드를 실행하여 column-rule-color 속성에 애니메이션을 적용하는 방법을 직접 확인해 보세요.
예제 코드
<!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;
}
}
</style>
</head>
<body>
<h2>column-rule-color 속성 애니메이션 데모</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>코드 설명
위 예제의 핵심 요소를 살펴보면 다음과 같습니다.
1. 다단 레이아웃 설정
column-count: 4를 지정하여 텍스트가 4개의 열로 나뉘도록 구성했고, column-rule: 10px inset orange로 열 사이에 주황색 구분선을 설정했습니다.
2. 애니메이션 정의
animation: myanim 3s infinite를 통해 3초 주기로 무한 반복되는 애니메이션을 적용했습니다. @keyframes myanim 내부의 20% 지점에서 column-rule-color: black이 지정되어, 구분선 색상이 주황색에서 검정색으로 자연스럽게 전환됩니다.
3. 추가 효과
동일한 키프레임에서 bottom과 box-shadow 값도 함께 변경되어, 요소가 위로 이동하면서 그림자 효과도 나타나도록 구성했습니다.
이처럼 column-rule-color는 색상 값이므로 CSS 애니메이션과 완벽하게 호환되며, 다양한 키프레임 구간에서 여러 색상으로 전환하는 것도 가능합니다.