CSS의 opacity 속성에 애니메이션을 적용하면 요소가 서서히 나타나거나 사라지는 부드러운 페이드 효과를 만들 수 있습니다. 이를 위해서는 @keyframes 규칙으로 애니메이션 단계를 정의하고, animation 속성을 통해 해당 애니메이션을 요소에 연결하면 됩니다.
opacity 애니메이션의 기본 원리
opacity 값은 0(완전히 투명)부터 1(완전히 불투명) 사이의 숫자로 지정합니다. 아래 예제에서는 @keyframes 내부에 30% 지점에서 opacity를 0.4로 설정하여, 애니메이션이 진행되는 동안 요소가 점점 투명해졌다가 다시 불투명해지는 효과를 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
position: absolute;
top: 60px;
width: 300px;
height: 150px;
background-color: lightblue;
animation: myanim 4s infinite;
}
#demo2 {
position: absolute;
top: 90px;
left: 30px;
width: 300px;
height: 150px;
background-color: orange;
animation: myanim 3s infinite;
}
#demo3 {
position: absolute;
top: 120px;
left: 60px;
width: 350px;
height: 150px;
background-color: coral;
}
@keyframes myanim {
30% {
opacity: 0.4;
}
}
</style>
</head>
<body>
<p>불투명도(opacity) 변화 확인하기</p>
<div id = "demo1"><h1>End div</h1></div>
<div id = "demo2"></div>
<div id = "demo3"><h1>Start div</h1></div>
</body>
</html>코드 설명
- #demo1: 하늘색(lightblue) 배경의 요소로,
animation: myanim 4s infinite;를 통해 4초 주기로 애니메이션이 무한 반복됩니다. - #demo2: 주황색(orange) 배경의 요소로, 3초 주기로 같은 애니메이션이 반복되어 서로 다른 속도의 페이드 효과를 보여줍니다.
- #demo3: 산호색(coral) 배경의 요소로, 애니메이션이 적용되지 않아 항상 완전히 불투명한 상태로 유지됩니다. 두 요소와 비교하는 기준 역할을 합니다.
- @keyframes myanim: 애니메이션 진행률 30% 시점에 opacity를 0.4로 낮추어 요소가 반투명해지도록 정의합니다.
이처럼 @keyframes와 animation 속성을 조합하면 별도의 JavaScript 없이도 순수 CSS만으로 다양한 불투명도 애니메이션을 손쉽게 구현할 수 있습니다.