본문 바로가기
JavaScript

CSS - 배경 이미지 animation 으로 이동시키기

by 새발개발JA 2022. 7. 3.
반응형

updated 02/21/24

 

 

 

페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다.

이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자

 

결과화면 미리보기 

이미지가 스르륵 뜨는 효과이다

 


 

CSS - 배경 이미지 animation 으로 이동시키기 

 

일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자

// 이미지 태그가 있다. 
<img className="building-img" src={building} />

 

 

 

animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다.

** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 

 

방법1

.building-img {      
      position: absolute; // 일단 위치지정은 필수지!
      top: 500px;  	  // 원래 자리인 top 을 지정해주고 
      animation: transY 2s ease-in-out; // 애니메이션 속성을 지정해주자
      
      @keyframes transY {
        0% {
          transform: translateY(400px); // 이 top 기준으로 400px 내려간 곳에서 시작할거다
          opacity: 0; // 처음에는 가려놓고 
        }
        100% {
          transform: translateY(0px);   // 그리고 도착지는 원래 지점
          opacity: 1; // 마지막에 슬슬 보여주기
        }
      }
}

 

 

방법2

  animation: showY 0.4s;
  animation-fill-mode: forwards; // 애니메이션 끝난 후 마지막 프레임이 유지

  @keyframes showY {
    from {
      transform: translateY(100%); // 100 퍼센트 내려간 곳에서 시작할수도 있다
      opacity: 0;
    }
    to {
      transform: translateY(0); // 맨 위로 올라오기
      opacity: 1;
    }
  }

 

 

**animation-fill-mode

- none: 기본값으로, 애니메이션이 시작되기 전과 끝난 후에 요소의 스타일은 애니메이션 이전의 상태로 돌아갑니다.
- forwards: 애니메이션이 끝난 후에는 애니메이션의 마지막 프레임의 스타일이 유지됩니다.
- backwards: 애니메이션이 시작되기 전에는 애니메이션의 첫 번째 프레임의 스타일이 적용됩니다.
- both: forwards와 backwards의 효과를 모두 적용하여 애니메이션이 시작 전과 끝난 후에 요소의 스타일이 유지

반응형

댓글