CSS로 물결 애니메이션 만들기

 🐳  물결치는 애니메이션 만들기  🌊

 

물결치는 애니메이션 포스팅을 보고 응용해서 만든 달빛이 반짝이는 밤하늘과 바다를 표현한 애니메이션이다. 해당코드는 코드펜에 올라가있으며 하나씩 분석하며 애니메이션을 따라해보자! 이미지가 움직이지않는다면 클릭을 하자!

 

---

  CodePen 코드 확인하기(0.5X로 확인하자)  

See the Pen Wave Animation by hyoj_lee (@ovovv) on CodePen.

 

 

---

 

 

  코드를 분석해보자!🧐 

 

😎 HTML의 형태는 간단하다!

<div class="wrap">
  <div class="circle">
    <!-- wave -->
    <div class="wave-one"></div>
    <div class="wave-two"></div>
    <div class="wave-three"></div>
    <div class="wave-four"></div>
    
    <!-- moon -->
    <i class="fas fa-moon"></i>
    <i class="fas fa-moon blur"></i>
    
    <!-- star -->
    <div class="star">
      <i class="fas fa-asterisk star1"></i>
      <i class="fas fa-asterisk star2"></i>
      <i class="fas fa-asterisk star3"></i>
      <i class="fas fa-asterisk star4"></i>
      <i class="fas fa-asterisk star5"></i>
    </div>
  </div>
</div>

wrap는 원의 가운데를 맞추기위해서 넣은 태그이니 신경쓰지말고, 그 아래부터 확인하자! 먼저 모든 태그의 틀이 될 div circle을 작성 한 뒤, 파도를 표현할 wave 4개, 폰트어썸을 활용한 달 아이콘과, 빛나는 달빛을 표현해줄 태그하나, 마지막으로 반짝거리는 별들의 태그들을 작성한다. 사실 html의 형태자체는 굉장히 간단하다. div 태그로만 이루어져있다. 중요한건 css 태그들이다.

 

 

 

😎 원리를 이해하고 CSS를 작성하자!

파도치는 물결 애니메이션은 화려해보이지만 원리는 어렵지 않다. 일종의 착시효과다. CSS가 어느정도 길이가 있기때문에 보기만하면 이해가 어렵다. 쉽게 이해할 수 있도록 코드와 예시 사진으로 확인해보자.

.circle {
	...
    overflow: hidden; <- 중요!
    transform: translate3d(0, 0, 0);
}

.wave-one {
	...
	border-radius: 45%; <- 중요!
	animation: move 3s infinite linear;
}

@keyframes move {
	100% {
		transform: rotate(360deg);
	}
}

코드만 보기에는 원리가 무엇인지 파악하기 어렵다. 원리 이해를 위해서 중요 CSS과 애니메이션 효과를 제거한 형태로 보자. 끝이 둥근 사각형의 wave-one 태그가 원위에 겹쳐지는데 이때 CSS로 원을 빠져나간 부분을 가리면 아래와 같이 된다. 이 겹쳐진, border-radius를 적용한 둥근사각형이 중요하다.

이 사각형에 애니메이션을 주면 둥근끝과 남아있는 직선면이 회전하면서 물결이 치는듯한 착시효과가 나타난다. 뭉글뭉글하게 움직이는 형태를 확인할 수 있다. border-radius의 정도에 따라 움직임의 격함이 다르다. 차이가 크면 클수록 크게 요동치며, 원형에 가까울수록 움직임이 적다. 그리고 완전한 원형을 제작할경우 움직임은 보이지않는다. 사실 돌고 있는데 티가 안나는것일뿐이다.

 

이제 overflow를 이용해서 원형을 빠져나가는 불필요한 면적을 가려주면 하나의 물결이 완성된다. 이 원리를 이용하여 색상을 하나 하나 얹어가며 작업을 진행하면된다!

 

상당히 쉬운 원리이므로 응용할 수 있는 형태가 많을 것 같다! 물결치는 형태를 이용하여 원하는 효과를 만들자! 개인적으로 햇빛아래의 바다도 예쁠 것 같다.

 

 

 

 

참고문서 : https://wsss.tistory.com/446

[Animation] CSS를 이용한 물결 애니메이션 만들기

참고문서 : https://velog.io/@gicomong/%EB%AC%BC%EA%B2%B0%EC%B9%98%EB%8A%94-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90

물결치는 애니메이션을 만들어보자!