CSS에서 box-shadow 속성에 애니메이션을 적용하면 요소의 그림자가 부드럽게 변화하는 시각적 효과를 만들 수 있습니다. 구현 방법은 간단합니다. @keyframes 규칙으로 애니메이션의 각 단계를 정의한 뒤, animation 속성을 통해 해당 요소에 적용하면 됩니다.
예제 코드
아래 예제는 노란색 배경의 div 요소가 위아래로 움직이면서 주황색 그림자가 점차 커지는 애니메이션을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 300px;
background: yellow;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
}
}
</style>
</head>
<body>
<h2>box-shadow 애니메이션 실행</h2>
<div></div>
</body>
</html>
코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 애니메이션을 3초 동안 무한히 반복 실행합니다.
- @keyframes myanim — 애니메이션 진행률 20% 지점에서 요소의 위치(bottom)와 그림자(box-shadow) 값을 동시에 변경합니다.
- box-shadow: 30px 45px 70px orange; — 가로 오프셋 30px, 세로 오프셋 45px, 흐림 반경(blur radius) 70px의 주황색 그림자를 설정합니다.
이처럼 box-shadow 속성도 다른 CSS 속성과 마찬가지로 @keyframes와 함께 활용하면 자연스러운 전환 효과를 손쉽게 구현할 수 있습니다. 그림자의 색상, 크기, 흐림 정도를 단계별로 조절해 다양한 연출이 가능합니다.