CSS3를 사용하여 애니메이션 효과를 얻는 방법을 단계별로 가르쳐줍니다(코드 공유).

이전 기사 "H5: 페이지에 애니메이션을 구현하는 여러 가지 방법이 있나요? (첨부코드) " 페이지에서 애니메이션을 구현하는 여러 가지 방법을 알려드립니다. 다음 기사에서는 CSS3를 사용하여 간단하고 아름다운 애니메이션 효과를 얻는 방법을 소개합니다.

CSS3의 애니메이션을 검토해 보세요. 이제 플래시를 거의 쓸 수 없게 되었습니다. 그때는 그랬지만 시대가 변해서 안타깝습니다. 이 기사를 문서로 취급하세요

브라우저 지원

Internet Explorer 10, Firefox 및 Opera는 애니메이션 속성을 지원합니다.

Safari와 Chrome은 대체 -webkit-animation 속성을 지원합니다.

참고: Internet Explorer 9 이하 버전은 애니메이션 속성을 지원하지 않습니다.

정의 및 사용법

animation 속성은 6개의 애니메이션 속성

• animation-name

• animation-duration

• animation-timing-function을 설정하는 약식 속성입니다. 애니메이션 지연

• 애니메이션 반복 횟수 애니메이션 방향

Syntax

animation: name duration timing-function delay iteration-count direction;

Value	Description	Remarks
애니메이션 타이밍 기능	애니메이션을 지정합니다. 속도 곡선	은 선형 값을 취할 수 있습니다. ,ase(페이드 인 및 페이드 아웃),easy-in,easy-out,easy-in-out,cubic-bezier(n,n,n,n)
animation-play-state	애니메이션을 표시할지 여부를 지정합니다. 실행 중이거나 일시중지 중입니다.	paused는 일시 중지된 상태를 의미하고 running은 실행 중인 상태를 의미합니다.
animation-name	은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다	@keyframe { from {opcity:0} to {opcity:1}}
animation-iteration-count	애니메이션을 재생해야 하는 횟수를 지정합니다.	선택 값은 무한(무한회) n(예: 5회)
animation-fill-mode	재생 전 또는 후의 애니메이션, 애니메이션 효과 표시 여부.	없음(기본값) / 앞으로(애니메이션이 완료된 후) / 뒤로(애니메이션이 표시되기 전) / 둘 다(둘 다)
animation-duration	애니메이션을 완료하는 데 걸리는 시간을 지정합니다. 초 또는 밀리초	그렇지 않으면 지정해야 하며, 애니메이션이 실행되지 않습니다.
animation-direction	애니메이션을 역방향으로 재생할지 여부를 지정합니다.	기본값은 일반, 대체는 애니메이션이 실행되어야 함을 의미합니다. 차례대로 역순으로 재생됩니다. 왼쪽 및 오른쪽
animation-delay	애니메이션이 시작되기 전의 지연 시간을 지정합니다.	애니메이션이 시작되기 전에 기다리는 시간을 초 또는 밀리초 단위로 정의합니다. 기본값은 0입니다. 단위는 s

키프레임 정의 정보

• Firefox는 대체 @-moz-keyframes 규칙을 지원합니다. Opera는 대체 @-o-keyframes 규칙을 지원합니다.
  

Safari 및 Chrome은 대체 @-webkit-keyframes 규칙을 지원합니다.

• 
  

은 0-100% 및 from, to를 지원합니다.

• 
  

  @keyframes move {
    0% {
      top: 0px;
      left: 0px;
    }
    25% {
      top: 200px;
      left: 200px;
    }
    50% {
      top: 100px;
      left: 100px;
    }
    75% {
      top: 200px;
      left: 200px;
    }
  
    100% {
      top: 0px;
      left: 0px;
    }
  }
  
  @keyframes move {
    from {
      top: 0px;
      left: 0px;
    }
    to {
      top: 0px;
      left: 100px;
    }
  }

  데모 예를 작성했습니다. 지구는 태양을 중심으로 회전합니다

다음은 코드입니다

<!-- html 部分 -->
<div style="width:700px; ">
  <div class="t">
    <div class="t1"></div>
  </div>
</div>

/* css 部分 */
@keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.t {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 50%;
  transform: scale(.8);
  border: 1px solid #dedede;
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background: radial-gradient(72px, #f00, #ff0, #080);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 0 37px #fcff4a;
  }
  .t1 {
    height: 20px;
    border-radius: 50%;
    width: 20px;
    margin-top: -10px;
    top: 50%;
    left: -10px;
    background: radial-gradient(26px, #0082ff, #184608, #003ade);
    position: absolute;
    animation: t 3s infinite linear;
    transform-origin: 260px center;
  }
}

</style>

데모도 있습니다. 여기 https://k-ui.cn

학습 추천CSS3 영상 튜토리얼

위 내용은 CSS3를 사용하여 애니메이션 효과를 얻는 방법을 단계별로 가르쳐줍니다(코드 공유).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!