[CSS] 007 효과 애니메이션 구현하기

 

안녕하세요! 오늘도 CSS 애니메이션 예제를 하나 만들어봤습니다. 이러한 효과를 어떻게 부르는지 정확히 알지 못해서 007효과라고 표현했는데, 구현한 효과는 다음과 같습니다. 

 

 

...네! 펭귄군 캐릭터가 배경 이미지로 지정된 영역을 남색 영역이 덮고 있는 상태에서, 투명한 원이 왔다갔다 하면서 원에 해당되는 부분만 배경 이미지가 노출되게 만든 애니메이션 효과입니다. 영화 007 시리즈의 오프닝과 느낌이 비슷하여 '007 효과 애니메이션 구현하기'라 이름 붙여봤습니다(정확한 이름 아시는 분 알려주세요...).

여기에 필요한 프로그래밍 언어는 HTML과 CSS인데, 각 코드는 다음과 같이 구현하였습니다.

 

<div class="container">
  <div class="animation">
    <div class="transparent"></div>
  </div>
</div>

div 가 세 번 사용되었고, 각각의 class를 통해서 역할을 구분하였습니다. 

container는 말 그대로 단순히 컨테이너 역할을 하는 블록입니다. 

animation은 애니메이션 동작이 구현될 영역입니다. 여기에 배경 이미지로 펭귄군 캐릭터를 지정할 것입니다.

transparent는 왔다갔다 움직이며 영역을 노출해 줄 투명한 원으로 사용할 것입니다. 

다음은 이 예제에서 핵심이라고 할 수 있는 CSS 코드입니다.

 

.container{
  width: 100%;
}
.animation{
  margin: auto;
  width: 640px; height: 480px;
  background-image: url(penguingoon.png);
  background-size: 100% 100%;
  overflow: hidden;
  animation-play-state: paused;
}
.transparent{
  width: 300px; height: 300px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px navy;
  position: relative;
  top: 0; left:0;
  animation: glance 3s ease-in-out 0s infinite;
  animation-play-state: paused;
}
.animation:hover .transparent{
  animation-play-state: running;
}
@keyframes glance {
  25%{ left : 340px; top : 0; }
  50%{ left : 340px; top : 180px; }
  75%{ left : 0; top : 180px; }
  100%{ left : 0; top : 0; }
}

 

전체적인 구현 방법은 이렇습니다. 

 

1. 투명한 원을 만들고, 그 주변을 남색 그림자로 가득 채운다(16행. box-shadow : 0 0 0 1000px navy)

2. 그림자가 애니메이션 영역을 벗어나지 않게 한다(9행. overflow: hidden)

3. 애니메이션 영역에 마우스 커서가 올라갔을 때, 투명한 원이 이동하도록 한다(22~24행의 코드 블록과 25행의 glance 키프레임)

4. 마우스가 영역을 벗어나면 애니메이션이 처음 상태로 돌아가는 것이 아니라, 애니메이션이 진행되던 상태에서 중단되도록 한다(20행, 23행)

 

애니메이션이 진행되다가 마우스를 벗어나면 동작을 멈추게 되는데, 이런 경우 일반적으로 원래의 상태로 돌아가게 됩니다. 이를 방지하기 위해 여기에서는 animation-play-state 라는 속성을 사용하여, 마우스가 hover되기 전에 멈춰있던 애니메이션이, hover되고 난 이후에는 실행되는 상태가 되도록 코드를 작성하였습니다. 

 

참고 자료 - developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state