CSS로 공이 튀는 애니메이션 효과를 얻는 방법은 무엇입니까? 공이 튀는 애니메이션 구현 예

CSS로 공이 튀는 애니메이션 효과를 얻는 방법은 무엇입니까? 이 기사에서는 CSS에서 공이 튀는 애니메이션 효과를 얻는 방법을 코드 예제를 통해 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 애니메이션 키프레임 정의

이 애니메이션에서는 두 개의 키프레임을 사용합니다. 하나는 공을 일정한 속도로 수평으로 이동하고 다른 하나는 대략 포물선 모양의 수직 바운싱 모션을 적용합니다. 수평 및 수직 이동을 단일 키프레임으로 결합하는 것이 가능하지만 이는 우리가 원하는 효과에는 작동하지 않습니다.

수평 이동은 다음 키프레임을 사용하여 쉽게 달성할 수 있습니다.

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

이 키프레임은 나중에 할당된 이름 "travel"을 사용하여 참조되고 각 반복 변경 방향에 따라 변경되는 선형(변환 타이밍 기능)을 사용하여 적용됩니다.

수직 바운스 애니메이션의 경우 손쉬운 인 및 페이드 아웃 타이밍 기능을 활용하여 중력장의 효과를 시뮬레이션할 것입니다.

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

이 키프레임은 나중에 참조할 수 있도록 "바운스"로 이름이 지정되었습니다.

이 두 키프레임을 결합하면 '공'이 수평으로 640픽셀, 수직으로 220픽셀 이동합니다. 물론, 이 값들은 "스테이지"의 크기에 맞게 조정되어야 합니다.

2. 애니메이션을 위한 무대 설정

늘 그렇듯이 먼저 애니메이션을 실행할 '무대'를 설정합니다. 이 경우 크기가 660 x 240픽셀인 간단한 DIV입니다. 너비를 100%로 설정하면 좋겠지만 정확한 픽셀 너비를 알지 못한 채 일부 요소를 배치하는 것은 어렵습니다.

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

이 단계에서는 수평으로 앞뒤로 움직이는 DIV 요소를 설정하고 그 안에 위아래로 튀는 '공'을 나타내는 DIV를 설정합니다.

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

그래서 '공'의 크기는 20x입니다. 모서리가 둥근 20픽셀입니다.

3. 공 움직임 설정

간단한 HTML 마크업으로 마무리했습니다.

<div id="stage">
   <div id="traveler">
       <div id="bouncer"><!-- --></div>
   </div>
</div>

브라우저가 지원하는 경우 애니메이션이 자동으로 시작되어 아래 상자(또는 #stage)에서 무한정 계속됩니다.

애니메이션의 x 및 y 구성 요소를 강조하기 위해 추가 요소와 일부 스타일을 추가했습니다. JavaScript는 필요하지 않으며 나머지 코드는 표시된 것과 똑같습니다.

CSS:ounce-animation.css (https://www.the-art-of-web.com/bounce-animation.css)

완료되었습니다!

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS로 공이 튀는 애니메이션 효과를 얻는 방법은 무엇입니까? 공이 튀는 애니메이션 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!