CSS3 애니메이션의 유형은 무엇입니까?

CSS3 애니메이션에는 세 가지 유형이 있습니다. 1. 전환 속성을 사용하여 구현된 그라데이션 애니메이션 2. 변환 속성을 사용하여 구현된 변환 애니메이션 3. 애니메이션 속성과 "@keyframes" 규칙을 사용하여 구현된 맞춤 애니메이션

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css 애니메이션을 구현하는 세 가지 주요 방법이 있습니다. 첫 번째는 그라디언트 애니메이션을 구현하는 전환이고 두 번째는 변형입니다. 변환 애니메이션, 세 번째 유형은 사용자 정의 애니메이션을 구현하는 animation입니다. 세 가지 애니메이션의 구현에 대해 자세히 이야기하겠습니다. css实现动画主要有3种方式，第一种是：transition实现渐变动画，第二种是：transform转变动画，第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。

transition渐变动画

我们先看一下transition

전환 그라디언트 애니메이션

먼저 전환의 속성을 살펴보겠습니다.

• property: 다음과 같이 변경해야 하는 CSS 속성을 입력합니다. , 줄 높이, 글꼴 크기, 색상 등, DOM 스타일과 함께 작동하는 모든 속성
• duration: 전환 효과를 완료하는 데 필요한 시간 단위(s 또는 ms)
• timing-function: 속도 곡선 효과 완료(선형, 이즈, 이즈 인, 이즈 아웃 등)

타이밍 기능 특정 값은 아래 표에서 볼 수 있습니다.

값 설명 선형균일한 속도(입방 베지어(0,0,1) ,1))ease느린 속도에서 빠른 속도로 그리고 다시 느려지도록(입방 베지어(0.25,0.1, 0.25,1))ease-in천천히 빨라짐 (cubic-bezier (0.42,0,1,1)과 동일)ease-out천천히 느려짐 (cubic-bezier와 동일) 베지어(0,0,0.58,1))ease-in-out먼저 더 빠르다가 더 느려짐(입방베지어(0.42,0,0.58,1)과 동일), 페이드인 효과) cubic-bezier 함수에서 자신만의 값을 정의하세요. 가능한 값은 0과 1 사이의 값입니다delay: 애니메이션 효과의 지연 트리거 시간(단위 ms 또는 s)

cubic-bezier(n,n,n,n

🎜

아래의 전체 예를 살펴보겠습니다.

<div class="base"></div>

.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
	    /*简写*/
	    /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

실행 효과:

마우스를 위로 올리면 애니메이션이 0.5초의 지연으로 시작되는 것을 볼 수 있으며 내부의 border-color没有设置到transition-property 때문에 그라데이션 애니메이션이 아닙니다.

---

transform animation

Transform 속성은 2D 또는 3D 변환에 적용됩니다. 이 속성을 사용하면 요소에 대해 회전, 크기 조정, 기울이기 및 이동의 네 가지 작업을 수행할 수 있습니다. 일반적으로 전환 속성과 함께 사용됩니다.

• none: 정의는 변환을 수행하지 않으며 일반적으로 변환을 등록하는 데 사용됩니다.

• transform-functions: 변환할 유형 함수를 정의합니다. 주요 내용은 다음과 같습니다.

  1. 회전: 주로 2D 회전과 3D 회전으로 나뉩니다. 회전(각도), 2D 회전, 매개변수는 45deg와 같은 각도입니다. 회전(x,y,z,angle), 3D 회전, 원래 위치에서 (x,y,z)까지 직선 주위의 3D 회전; RotateX(angle) , 3D 회전을 수행합니다. 주요 유형은 scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y) 및 scaleZ(z)를 포함하여 위와 동일합니다. 여기서 x, y 및 z는 수축률.

  3. Skew: 주로 요소의 스타일을 왜곡하는 데 사용됩니다. 기울이기(x 각도, y 각도), x 및 y 축을 따른 2D 기울이기 변환; 기울이기X(각도), x 축을 따른 2D 기울이기 변환, y 축을 따른 2D 기울이기 변환.

  4. 이동(번역): 주로 요소를 이동하는 데 사용됩니다. move(x, y)는 x 및 y 축으로 이동하는 픽셀을 정의하고, move(x, y, z)는 x, y, z 축으로 이동하는 픽셀을 정의합니다. Z(z)를 번역합니다.

  <h5 id="transition配合transform一起使用">transition配合transform一起使用</h5>
  <div class="base base2"></div>

  .base2{
            transform:none;
            transition-property: transform;
            &:hover {
                transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
            }
        }

실행 효과:

상자가 회전하고, 기울어지고, 번역되고, 확대된 것을 볼 수 있습니다.

애니메이션 맞춤 애니메이션

보다 유연한 애니메이션 효과를 얻기 위해 CSS3에서는 맞춤 애니메이션 기능도 제공합니다.

(1) 이름: 선택기에 바인딩되어야 하는 키프레임 이름입니다.

(2) 기간: 애니메이션을 완료하는 데 걸리는 시간(초 또는 밀리초)입니다.

(3) 타이밍 기능: 전환 선형과 동일합니다.
(4) 지연: 애니메이션이 시작되기 전 지연 시간을 설정합니다.
(5) iteration-count: 애니메이션 실행 횟수를 설정합니다. 무한은 무한 루프입니다.
(6) 방향: 애니메이션을 역방향으로 재생하기 위해 폴링할지 여부입니다. Normal은 기본값이며, 애니메이션은 정상적으로 번갈아 재생되어야 하며, 애니메이션은 차례로 역방향으로 재생되어야 합니다.

<h5 id="animate自定义动画">animate自定义动画</h5>
<div class="base base3"></div>

.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

실행 효과:

사용자 정의 애니메이션을 사용하면 첫 번째 및 두 번째 애니메이션의 모든 기능을 포함하여 보다 유연한 애니메이션 효과를 얻을 수 있으며 속성도 더욱 포괄적이라는 것을 알 수 있습니다.

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS3 애니메이션의 유형은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!