css 애니메이션

덤벙덤벙

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2020-04-09 (목) 04:24:05 2,395

http://poemofknights.ivyro.net/Avocado/

홈페이지 주소를 첨부합니다. 새가 무한반복으로 날아다니는 애니메이션을 적용했는데 화면 끝에 머물렀다가 반복되는 현상이 보여서요 ㅠ 바로 넘어가게 하는 방법을 모르겠어서 질문드립니다 ㅠㅠ

화면을 넓혀서 새가 머무르는 영역을 안보이게 할 수는 있지만 아래에 스크롤바가 생겨서 그냥 화면을 넓히지 않고도 바로 넘어가게 하고 싶습니다 ㅜ

아래는 코드입니다.

html

Copy

<div class="bird-container bird-container--one">

 

        <div class="bird bird--one"></div>

 

    </div>

   

 

    <div class="bird-container bird-container--two">

 

        <div class="bird bird--two"></div>

 

    </div>

 

     

 

    <div class="bird-container bird-container--three">

 

        <div class="bird bird--three"></div>

 

    </div>

 

     

 

    <div class="bird-container bird-container--four">

 

        <div class="bird bird--four"></div>

 

    </div>

css

Copy

.bird {

    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);

    background-size: auto 100%;

    width: 88px;

    height: 125px;

    will-change: background-position;

    animation-name: fly-cycle;

    animation-timing-function: steps(10);

    animation-iteration-count: infinite;

  }

  .bird--one {

    animation-duration: 1s;

    animation-delay: -0.5s;

  }

  .bird--two {

    animation-duration: 0.9s;

    animation-delay: -0.75s;

  }

  .bird--three {

    animation-duration: 1.25s;

    animation-delay: -0.25s;

  }

  .bird--four {

    animation-duration: 1.1s;

    animation-delay: -0.5s;

  }

  

  .bird-container {

    position: absolute;

    top: 20%;

    left: -15%;

    transform: scale(0) translateX(-10vw);

    will-change: transform;

    animation-name: fly-right-one;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

  }

  .bird-container--one {

    animation-duration: 15s;

    animation-delay: 0s;

  }

  .bird-container--two {

    animation-duration: 16s;

    animation-delay: 1s;

  }

  .bird-container--three {

    animation-duration: 14.6s;

    animation-delay: 9.5s;

  }

  .bird-container--four {

    animation-duration: 16s;

    animation-delay: 10.25s;

  }

  

  @keyframes fly-cycle {

    100% {

      background-position: -900px 0;

    }

  }

  @keyframes fly-right-one {

    0% {

      transform: scale(0.3) translateX(-10vw);

    }

    10% {

      transform: translateY(2vh) translateX(10vw) scale(0.4);

    }

    20% {

      transform: translateY(0vh) translateX(30vw) scale(0.5);

    }

    30% {

      transform: translateY(4vh) translateX(50vw) scale(0.6);

    }

    40% {

      transform: translateY(2vh) translateX(70vw) scale(0.6);

    }

    50% {

      transform: translateY(0vh) translateX(90vw) scale(0.6);

    }

    60% {

      transform: translateY(0vh) translateX(110vw) scale(0.6);

    }

    100% {

      transform: translateY(0vh) translateX(110vw) scale(0.6);

    }

  }

  @keyframes fly-right-two {

    0% {

      transform: translateY(-2vh) translateX(-10vw) scale(0.5);

    }

    10% {

      transform: translateY(0vh) translateX(10vw) scale(0.4);

    }

    20% {

      transform: translateY(-4vh) translateX(30vw) scale(0.6);

    }

    30% {

      transform: translateY(1vh) translateX(50vw) scale(0.45);

    }

    40% {

      transform: translateY(-2.5vh) translateX(70vw) scale(0.5);

    }

    50% {

      transform: translateY(0vh) translateX(90vw) scale(0.45);

    }

    51% {

      transform: translateY(0vh) translateX(110vw) scale(0.45);

    }

    100% {

      transform: translateY(0vh) translateX(110vw) scale(0.45);

    }

  }

그누보드5