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

gicomong·2021년 6월 5일
36

css animation

목록 보기
20/21
post-thumbnail

이번 시간에는 물결치는 애니메이션을 만들어봅시다!

1. preview

!codepen[kumjungmin/embed/ExWWOjo?height=537&theme-id=dark&default-tab=css,result]



2. 코드 분석

1) html

  • wrapwave의 부모로, 배경 역할을 한다.
  • wave들은 물결 역할을 한다. 총 2개의 wave를 겹쳐서 사용한다.
<div class="frame">
  <div class="wrap">
    <div class="wave"></div>
    <div class="wave layer_1"></div>
  </div>
</div>



2) scss

(1) 기본 속성 부여하기

A. wrap 클래스에 기본 스타일 주기

.wrap { 
  width: 300px;        //[1]
  height: 300px;       //[1]
  position: relative;  //[2]
  border-radius : 50%; //[3]
  background: ...;
  ...
  }

[1] 부모역할을 하는 wrap 클래스에 높이 넓이를 300px로 설정한다.
[2] 그 다음, 자식인 wave 클래스가 절대 위치에 위치하도록 부모에 position:relative를 한다.
[3] border-radius : 50%를 해서, 원 모양으로 만든다.


B. wave 클래스에 기본 스타일 주기

.wave {
  width: 500px;       //[1]
  height: 500px;      //[1]
  position: absolute; //[2]
  background: ...;
  ...
}

[1] 물결 모양을 내기에 앞서, wave클래스의 높이, 넓이를 500px로 설정한다. (부모 기준 150~200차이나게)
[2] position: absolute을 하여 위치조정이 가능하게 준비한다.



(2) 물결 효과의 핵심은 이것

  • 물결 애니메이션을 만든다니 하니 이제까지 사용하지 않은 생소한 속성을 쓸 것 같지만...!
  • 사실은 border-radiusoverflow가 핵심이다.
  • 그림은 물결 효과의 구조로, 원은 wrap 클래스, 빨간색 네모는 wave 클래스이다.
  • 핵심은 물결 역할을 할 wave 클래스에는 border-radius:43%를 주고
  • 부모인 wrap 클래스에는 overflow:hidden을 주는 것이다.
  • 이 부분을 코드로 보자.

A. wave 클래스에는 border-radius를 주자!

.wave {
  ...
  top: 60%;       //[1]
  left: -100px;   //[1]
  border-radius: 43%;    //[2]
}

[1] 먼저, 원이 부모를 기준으로 중앙 쯤에 위치하게 한다.
[2] 앞서 언급한 border-radius: 43%를 주어 엉성한 네모를 만든다.

위 속성을 추가하면 아래와 같은 모습이 된다.


B. wrap 클래스에는 overflow 속성을 주자!

이 보기 싫게 튀어나온 빨간 원이 어떻게 물결이 될까?
일단 물결처럼 보이기 위해서는 부모 밖으로 튀어나오면 안된다.

.wrap { 
  ...
  overflow: hidden;      //[1]
} 

[1] wrap클래스overflow: hidden을 준다.

그러면, 그림처럼 튀어나온 부분이 숨겨진다!



(3) 회전 애니메이션 주기

이제 마지막으로, wave클래스에 회전 애니메이션을 주면 물결이 된다!

A. keyframe으로 회전 애니메이션 만들기

  • transformrotate(-360deg)를 주어, -360도 회전하는 애니메이션을 만든다.
@keyframes drift {
  100% { 
    transform: rotate(-360deg); 
  }
}

B. 두 개의 wave클래스에 애니메이션 적용하기

  • 앞서 생성한 drift애니메이션은 wave클래스에 적용한다.
  • 이때, layer_1클래스에는 다른 애니메이션 재생시간을 주어, 두 물결이 교차 동작하게 한다.
.wave {
  ...
  animation: drift 4s infinite linear;     //재생시간 6초
//animation: 애니메이션명 재생시간 무한반복 부드럽게재생  
}
.wave.layer_1 {
  animation: drift 8s infinite linear;     //재생시간 10초   
}





출처
아래 출처로 이동하면 더 많이 알 수 있다고? 좋다 좋아~ 👏👏

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

관심 있을 만한 포스트

8개의 댓글

comment-user-thumbnail
2021년 6월 9일

와 애니메이션 장인이시네요 ... 멋져요 👍👍

1개의 답글
comment-user-thumbnail
2021년 6월 10일

항상 아이디어를 생각하는 게 가장 어려운 것 같습니다. 어떻게 해야 "내가 원하는대로 보일까" 라는 부분이요! 매번 잘 보고 있습니다!

1개의 답글
comment-user-thumbnail
1일 전

에니메이션 효과 배워갑니다. css도 상당히 고난이도더라구요 ㅠㅠ

1개의 답글