CSS 애니메이션, 위아래 움직이는 효과주기

과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다.

 

아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다.

 

사용한 CSS애니메이션 스타일은 이와같이 사용했다.

 

<style jsx>{`
       .cloud {
        margin:10px;
        position:relative;
        -webkit-animation:glide 1s ease-in-out alternate infinite;
     }
     
    
     .cloud2 {
      margin:10px;
      position:relative;
      -webkit-animation:glide2 1s ease-in-out alternate infinite;
   }
   @-webkit-keyframes glide  {
    from {
       left:0px;
       top:70px;
    }
    
    to {
       left:0px;
       top:100px;
    }
 
 }
 @-webkit-keyframes glide2  {
  from {
     left:0px;
     top:0px;
  }
  
  to {
     left:0px;
     top:40px;
  }

}
.side{
  position:relative;
  left:30px;
  margin:50px;
}
.side2{
  position:relative;
  right:30px;
  margin:50px;
}
        
      `}</style>

next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다.

 

다만 좀더 디테일하게 설정한 부분이 두 가지 있다.

 

단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고

 

한 묶음으로 아래와 같이 묶어서 사용해줬다.

   <div className="cloud">
    <div className='side'>#꼬들</div>
    <div className='side2'>#탱글</div>
    <div className='side'>#쫄깃</div>
    <div className='side2'>#파</div>
    <div className='side'>#달걀</div>
    <div className='side2'>#소고기</div>
    </div>

그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다.

 

.side{
  position:relative;
  left:30px;
  margin:50px;
}
.side2{
  position:relative;
  right:30px;
  margin:50px;
}

그부분이 이렇다. 이미 relative로 position 상태를주고 그상태에서 애니메이션을 줬더니 개별 속성이

 

위치 배치가 제대로 되지않았다. 그래서 

 

1)전체 움직임은 크게 묶어서 동시에 움직이게 position 애니메이션 설정

 

2)각각 태그별 div하나하나씩은 또 위치를 따로 설정

 

그래서 이와같은 형태를 만들어 주었다.

 

 

참고한링크

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

https://www.w3schools.com/css/css3_animations.asp

CSS Animations

https://www.demo2s.com/html-css/css-animate-to-move-image-up-and-down.html

CSS Animate to move image up and down