CSS 색상 속성 애니메이션 구현하기
CSS에서는 animation 속성과 @keyframes 규칙을 조합하면 요소의 색상(color) 속성에도 부드러운 애니메이션 효과를 쉽게 적용할 수 있습니다. 아래 예제 코드를 실행하면 div 요소가 위아래로 움직이면서 글자 색상과 그림자 색상이 함께 변화하는 모습을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
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;
color: blue;
}
}
</style>
</head>
<body>
<h2>색상 속성에 애니메이션 적용하기</h2>
<div>This is our demo div!</div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 동안 무한히 반복 실행합니다.
- @keyframes myanim — 애니메이션 진행률 20% 시점에 적용될 스타일을 정의합니다.
- color: blue; — 해당 시점에 글자 색상이 파란색으로 자연스럽게 전환됩니다.
- box-shadow — 주황색 그림자 효과도 색상과 함께 애니메이션됩니다.
이처럼 색상 애니메이션은 color, background-color, border-color 등 다양한 색상 관련 속성에 모두 적용할 수 있으며, 브라우저가 시작 색상과 종료 색상 사이의 중간값을 자동으로 계산해 주기 때문에 별도의 JavaScript 없이도 매끄러운 전환 효과를 만들 수 있습니다.