CSS (5): 애니메이션

• 애니메이션 이름

애니메이션 이름
구문: animation-name: none| 애니메이션 이름은 @keyframes로 정의되므로
요소로 정의된 애니메이션 이름은 @keyframes 규칙과 함께 사용해야 합니다. .

• @키프레임

구문:
@keyframes {
[from|to|]{sRules}[,*]
}
를 키프레임이라고 하며, 이는 유사합니다. 플래시의 키프레임에. CSS3에서는 주로 "@keyframes"로 시작하고 그 뒤에 애니메이션 이름과 중괄호 쌍 "{...}"이 옵니다. 괄호 안에는 다양한 기간에 대한 몇 가지 스타일 규칙이 있습니다.

<span style="color: #008080;">1</span> <span style="color: #000000;">/*定义一个名为"fromLeftToRight"的向右移动的动画*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">@keyframes fromLeftToRight{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    from{margin:0;}
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    to{margin:100px;}
</span><span style="color: #008080;">5</span> }

• 애니메이션 지속 시간

애니메이션 지속 시간 설정
구문: animation-duration:[,]*

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并持续一秒时间*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> }

• 애니메이션 타이밍 기능

애니메이션의 전환 속도 유형
구문: animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，持续一秒时间，并且过渡类型为ease-in*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> }

• 애니메이션 지연

애니메이션 지연 시간 설정
구문: animation-delay: [,]*

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，延迟一秒后执行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-delay: 1s;
</span><span style="color: #008080;">7</span> }

• 애니메이션 반복 횟수

애니메이션 실행 횟수 설정
구문: animation-iteration-count: 무한|
무한은 무제한을 의미합니다

<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果，执行两次后停止*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 2;
</span><span style="color: #008080;">7</span> }

• 애니메이션 연출

루프에서 애니메이션을 역순으로 실행할지 여부를 설정합니다.
구문: animation-direction: Normal|reverse|alternate|alternate-reverse
설명:
normal: 법선 방향
reverse: 역방향 실행
alternate: 애니메이션이 처음에는 정상적으로 실행된 다음 역방향으로 실행되고, 교대로 계속 실행됩니다.
alternate-reverse: 애니메이션이 먼저 역방향으로 실행된 다음 정방향으로 실행되고, 교대로 계속 실행

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且反复运行*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-direction: alternate;
</span><span style="color: #008080;">8</span> }

• 애니메이션 채우기 모드

애니메이션 시작 및 종료 상태 설정
구문: animation-fill-mode: none|forwards|backwards|both
설명:
none: 기본값입니다. 애니메이션이 없는 상태
forwards: 객체 상태를 애니메이션 종료 시 상태로 설정
backwards: 객체 상태를 애니메이션 시작 시 상태로 설정
둘 다: 객체 상태를 다음으로 설정 애니메이션의 끝이나 시작 부분의 상태

<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且动画结束后元素位于动画结束时的位置*/
</span><span style="color: #008080;">2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    animation-iteration-count: 3;
</span><span style="color: #008080;">7</span> <span style="color: #000000;">    animation-fill-mode: forwards;
</span><span style="color: #008080;">8</span> }

• 애니메이션 재생 상태

애니메이션 재생 상태 설정
구문: animation-play-state: running|paused

<span style="color: #008080;"> 1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果，并且当div处于hover状态时暂停动画*/
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">div{
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;">    animation-name：fromLeftToRight；
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;">    animation-duration：1s;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    animation-timing-function:ease-in;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">    animation-iteration-count: infinite;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">div:hover{
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">    animation-play-state: paused;
</span><span style="color: #008080;">10</span> }

• 애니메이션

애니메이션의 약어 속성
구문:
animation: [animation-name] || [animation-duration] || [animation-timing-function] || 반복 횟수 ] || [ 애니메이션 방향 ] || <단일 애니메이션-재생 상태> >