CSS3 애니메이션 애니메이션 관련 속성 및 키프레임 규칙 키프레임에 대한 자세한 소개

어제 3차원 큐브를 작성할 때 애니메이션 구문을 사용했습니다.

오늘 시스템에 와서 리뷰
전환에는 한계가 있습니다
는 간단하지만 두 상태 사이에서
만 변경할 수 있으며 이벤트 의 드라이버 가 필요합니다.
혼자서는 움직일 수 없습니다
그래서 이 문제를 해결하려면
애니메이션 애니메이션이 필요합니다

애니메이션

애니메이션 효과를 얻으려면
만 애니메이션속성만으로는 충분하지 않습니다
@키프레임 규칙도 필요합니다
먼저 예제를 살펴보겠습니다

p class="demo"></p>

rrree

마우스를 가리키면 요소가 먼저 빨간색으로 변한 후 전환됩니다. 보라색에서 녹색으로 전환됩니다

먼저 @keyframes 규칙을 살펴보겠습니다

keyframes

@keyframes에서 , 애니메이션 키프레임을 정의합니다
그런 다음 애니메이션은 키프레임에 지정한 프레임 상태에 따라 전환을 실행합니다.
0% - 100%는 애니메이션의 시간 전환을 나타냅니다.
0% 및 100%는 규칙에 따라
는 from 및 to 키워드

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

---

로 대체될 수 있습니다. 시작 프레임을 생략하면 브라우저는 원래 스타일

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

---

게다가 이렇게 같은 프레임을 함께 쓸 수도 있습니다

@keyframes change {
    100% {        background-color: lime;    }}

animation

animation은 다음 하위 속성을 갖는 복합 속성입니다

• 애니메이션 이름 키프레임 애니메이션 이름 지정
  

• 애니메이션 지속 시간 애니메이션 실행 시간 지정
  

• animation-timing-function 애니메이션의 속도 곡선 지정, 기본값은 "ease" easing
  

• animation-delay 애니메이션 지연 시간 지정, 기본값 "0" 지연 없음
  

• animation-iteration -count 애니메이션 재생 횟수를 지정합니다. 기본값은 "1"로 한 번 실행됩니다.
  

• animation-direction 애니메이션 실행 방향 지정, 기본값은 "normal"
  

이 복합 속성은 전환보다 더 복잡합니다.

처음 4개 속성은 그렇지 않습니다. 많이 설명했는데, 전환과 유사합니다
잊어버린 분들을 위해 여기를 클릭하세요 -> 포털

animation-iteration-count 애니메이션 재생 횟수를 입력하는 것 외에도

또한 일반적으로 사용되는 키워드 무한
루프

animation-direction에는 일반

• reverse 외에도 다음과 같은 속성 값이 있습니다. 역방향 재생 애니메이션
  

• 대체 대체 애니메이션
  

• 대체- 역방향 역방향 애니메이션
  

예를 통해 설명

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

기본

일반:
2개의 테스트 애니메이션:
100px -> 200px
100px -> 200px

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

---

reverse:
2개의 테스트 애니메이션 :
200px -> ; 100px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

---

대체:
두 개의 테스트 애니메이션:
100px -> 200px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

---

alternate-reverse:
두 개의 테스트 애니메이션:
200px -> 100px
100px -> 200px

animation-fill-mode

아래에서 설명할 두 가지 속성은 애니메이션의 하위 속성이 아닙니다.

그래서 애니메이션에 쓸 수 없습니다

animation-fill-mode는 애니메이션 시간 이외의

객체상태를 지정하며 기본값은 "none"입니다. none 외에 다음도 있습니다. 다음 속성 값

• for병동 애니메이션이 완료된 후 마지막 속성을 유지합니다(마지막 프레임에 정의됨).
  

• backwards  
  在animation-delay指定时间内、动画显示之前，应用起始属性（定义在第一帧）

• both  
  应用forwards和backwards两种模式

---

forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

我们发现1s之后，元素并没有回到最初的100px，而是保持了我们最后一帧的200px状态

---

backwards  
理解这个属性，我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后，1s后瞬间变为150px，然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px，然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用，延迟前就应用第一帧动画的样式，然后准备过渡

animation-play-state

animation-play-state    指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

---

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

위 내용은 CSS3 애니메이션 애니메이션 관련 속성 및 키프레임 규칙 키프레임에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!