투명도가 변하는 애니메이션 만들기

See the Pen 투명 애니메이션 by nilgi (@nilgi) on CodePen.

 

▶ HTML

<style type="text/css">
     .op { // 클래스 op에
          width: 150px; height: 150px; // 가로 크기 150xp 세로 크기 150px
     }
     .op2 { // 클래스 op2에
          position: absolute; // 절대 위치 지정
          left: 20px; // 왼쪽에서 20px 떨어지게
          top: 40px; // 위에서 40px 떨어지게
     }
</style>

<div class="op op1" style="background: tomato; border-radius: 50%; text-align: center; padding: 60px 0; box-sizing: border-box;">OPACITY ANIMATION</div> // div 클래스 이름 op와 op1, 배경색 토마토; 테두리 둥글기 50%; 정렬은 중앙에; 안쪽여백 상하 60px 좌우 0px; 콘텐츠 박스 크기는 테두리까지 모두 포함한 값으로 지정
<div class="op op2" style="background: #333; border-radius: 50%;"></div> // div 클래스 이름은 op와 op2며 배경색은 #333(먹색); 테두리 둥글기는 50%

 

▶ CSS

.op2 { // 클래스 op2에
    animation: op2 4s infinite; // 애니메이션 이름 op2 지정. 4초. 반복
}

@keyframes op2 { 애니메이션 op2에 키프레임 추가
    50% { // 4초 중 50% 지점에
        opacity: 0; // 투명도 0으로 변경
    }
}

태그가 잘 생각나지 않을 때는 이렇게 하나하나 설명하면서 쓰면 좋다.