웹 앱에서 CSS로 날아다니는 새 애니메이션 코드 작성

10114 단어 webdevcssproductivityhtml
웹사이트를 방문하고 스스로 생각한 적이 있습니까? 나는 그것을 자주 말하지 않으며 내 자신의 웹 앱을 개발할 때 아마도 가장 큰 두려움이었을 것입니다.
역동적으로 보이고 관심을 끄는 웹 앱을 원했습니다. 그때 저는 codepen.io에서 Kome이 만든 이 아름다운 애니메이션을 우연히 발견했습니다: ( https://codepen.io/hoangdacviet/pen/GRWvWmg )

1단계: HTML 설정
먼저 모든 항목의 클래스 이름을 포함할 html 파일의 본문에 일부 div를 만드는 것입니다.

<div class="container">
    <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>
</div>

2단계: 스프라이트란 무엇입니까?


가장 먼저 알아야 할 것은 실제로 어떤 종류의 이미지로 작업하고 있는지입니다. 이미지 스프라이트는 단일 이미지에 포함된 이미지 모음입니다. 즉, 우리의 애니메이션은 실제로 끊임없이 회전하는 새 이미지 스트립입니다. 스프라이트를 회전하려면 아래 코드를 따르십시오.
.bird {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;
  -webkit-animation-name: fly-cycle;
          animation-name: fly-cycle;
  -webkit-animation-timing-function: steps(10);
          animation-timing-function: steps(10);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

2단계: 새의 시간을 재보세요!

애니메이션을 보다 사실적이고 역동적으로 보이게 하려면 이 단계가 매우 중요합니다! 애니메이션을 만들기 위해 열심히 노력했는데 새들이 항상 같은 경로를 따라가는 것처럼 보인다고 상상해보세요… 본질적으로 당신이 찾고 있는 것은 각각의 개별 새에 대한 애니메이션이 다양한 시간에 시작되고 다양한 시간 동안 지속되어 새들이 서로를 따라다니며 서로 다른 속도로 날아가는 것처럼 보이도록 하는 것입니다. 방법은 다음과 같습니다.
.bird--one {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.bird--two {
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s;
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
}
.bird--three {
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
  -webkit-animation-delay: -0.25s;
          animation-delay: -0.25s;
}
.bird--four {
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

새 컨테이너가 실제로 화면에서 새를 이동시키는 역할을 하므로 새 컨테이너에 애니메이션 지연 및 지속 시간도 추가해야 합니다.
.bird-container {
  position: absolute;
  top: 20%;
  left: -10%;
  -webkit-transform: scale(0) translateX(-10vw);
          transform: scale(0) translateX(-10vw);
  will-change: transform;
  -webkit-animation-name: fly-right-one;
          animation-name: fly-right-one;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.bird-container--one {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.bird-container--two {
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.bird-container--three {
  -webkit-animation-duration: 14.6s;
          animation-duration: 14.6s;
  -webkit-animation-delay: 9.5s;
          animation-delay: 9.5s;
}
.bird-container--four {
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  -webkit-animation-delay: 10.25s;
          animation-delay: 10.25s;
}

3단계: 날아라!

가장 흥미로운 부분! 날아갈 시간! 이제 css로 애니메이션을 만들 때 가장 중요한 부분은 키프레임의 개념을 이해하는 것입니다. @keyframes 규칙 내에서 CSS 스타일을 지정하면 애니메이션이 특정 시간에 현재 스타일에서 새로운 스타일로 점진적으로 변경됩니다. 이러한 변화는 백분율로 정의되는 "경유지"에서 발생합니다. 우리의 경우 새는 주어진 x축과 y축으로 정의된 대로 화면에서 위치를 변경합니다. 또한 보는 사람에게 더 가까이 또는 더 멀리 날아가는 것처럼 보이도록 배율을 조정했습니다. 코드는 다음과 같습니다.
@-webkit-keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}
@-webkit-keyframes fly-right-one {
  0% {
    -webkit-transform: scale(0.3) translateX(-10vw);
            transform: scale(0.3) translateX(-10vw);
  }
  10% {
    -webkit-transform: translateY(2vh) translateX(10vw) scale(0.4);
            transform: translateY(2vh) translateX(10vw) scale(0.4);
  }
  20% {
    -webkit-transform: translateY(0vh) translateX(30vw) scale(0.5);
            transform: translateY(0vh) translateX(30vw) scale(0.5);
  }
  30% {
    -webkit-transform: translateY(4vh) translateX(50vw) scale(0.6);
            transform: translateY(4vh) translateX(50vw) scale(0.6);
  }
  40% {
    -webkit-transform: translateY(2vh) translateX(70vw) scale(0.6);
            transform: translateY(2vh) translateX(70vw) scale(0.6);
  }
  50% {
    -webkit-transform: translateY(0vh) translateX(90vw) scale(0.6);
            transform: translateY(0vh) translateX(90vw) scale(0.6);
  }
  60% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
            transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
  100% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
            transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}
@keyframes fly-right-one {
  0% {
    -webkit-transform: scale(0.3) translateX(-10vw);
            transform: scale(0.3) translateX(-10vw);
  }
  10% {
    -webkit-transform: translateY(2vh) translateX(10vw) scale(0.4);
            transform: translateY(2vh) translateX(10vw) scale(0.4);
  }
  20% {
    -webkit-transform: translateY(0vh) translateX(30vw) scale(0.5);
            transform: translateY(0vh) translateX(30vw) scale(0.5);
  }
  30% {
    -webkit-transform: translateY(4vh) translateX(50vw) scale(0.6);
            transform: translateY(4vh) translateX(50vw) scale(0.6);
  }
  40% {
    -webkit-transform: translateY(2vh) translateX(70vw) scale(0.6);
            transform: translateY(2vh) translateX(70vw) scale(0.6);
  }
  50% {
    -webkit-transform: translateY(0vh) translateX(90vw) scale(0.6);
            transform: translateY(0vh) translateX(90vw) scale(0.6);
  }
  60% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
            transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
  100% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.6);
            transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}
@-webkit-keyframes fly-right-two {
  0% {
    -webkit-transform: translateY(-2vh) translateX(-10vw) scale(0.5);
            transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }
  10% {
    -webkit-transform: translateY(0vh) translateX(10vw) scale(0.4);
            transform: translateY(0vh) translateX(10vw) scale(0.4);
  }
  20% {
    -webkit-transform: translateY(-4vh) translateX(30vw) scale(0.6);
            transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }
  30% {
    -webkit-transform: translateY(1vh) translateX(50vw) scale(0.45);
            transform: translateY(1vh) translateX(50vw) scale(0.45);
  }
  40% {
    -webkit-transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
            transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }
  50% {
    -webkit-transform: translateY(0vh) translateX(90vw) scale(0.45);
            transform: translateY(0vh) translateX(90vw) scale(0.45);
  }
  51% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
            transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
  100% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
            transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}
@keyframes fly-right-two {
  0% {
    -webkit-transform: translateY(-2vh) translateX(-10vw) scale(0.5);
            transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }
  10% {
    -webkit-transform: translateY(0vh) translateX(10vw) scale(0.4);
            transform: translateY(0vh) translateX(10vw) scale(0.4);
  }
  20% {
    -webkit-transform: translateY(-4vh) translateX(30vw) scale(0.6);
            transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }
  30% {
    -webkit-transform: translateY(1vh) translateX(50vw) scale(0.45);
            transform: translateY(1vh) translateX(50vw) scale(0.45);
  }
  40% {
    -webkit-transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
            transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }
  50% {
    -webkit-transform: translateY(0vh) translateX(90vw) scale(0.45);
            transform: translateY(0vh) translateX(90vw) scale(0.45);
  }
  51% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
            transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
  100% {
    -webkit-transform: translateY(0vh) translateX(110vw) scale(0.45);
            transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}

결론

휴 이것은 네 마리의 작은 새를 위한 많은 코드입니다! 그러나 궁극적으로 그들은 그만한 가치가 있으며 정직하게 동료들 사이에서 내 전화 카드가되었습니다. 저는 이 애니메이션을 친환경에 초점을 맞춘 웹 앱과 여행에 초점을 맞춘 또 다른 웹 앱에 사용했습니다. 이를 활용하는 다른 방법을 찾고 다른 이미지 스프라이트를 추가할 수도 있습니다! 각 작업의 작동 방식에 대한 정보를 너무 많이 추가하지는 않았습니다. 기타 내 데모: https://codepen.io/hoangdacviet/pen/zYZdwzg

Geek: 웹 디자인 모바일 앱 마케팅 ❤️ Startup Smarthome IoT
돈 좌우명: 사람 사랑 ❤️ 구름
인생 좌우명: ✔️NO PAIN NO GAIN
비즈니스: http://svtre.com https://kami.vn http://kome.top
cakePHP로 변수의 내용을 실시간으로 출력한다(초보자용)
Atom에서 Rails를 폭속 개발하는 환경을 만들어 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage