CSS3의 애니메이션 속성 사용에 대한 자세한 설명

애니메이션 소개를 시작하기 전에 먼저 "키프레임"이라는 특별한 것을 이해해야 합니다. 우리는 이를 "키프레임"이라고 부릅니다. 이 "키프레임"이 무엇인지 살펴보겠습니다. 앞서 간단한 전환 효과를 만들기 위해 전환을 사용할 때 초기 속성과 최종 속성, 시작 동작 시간과 지속 동작 시간은 물론 동작의 변환 속도도 포함시켰습니다. 실제로 이 값들은 모두입니다. 예를 들어, 첫 번째 기간에 어떤 작업을 수행하고 싶은지, 두 번째 기간에 어떤 작업을 수행하고 싶은지(플래시로 전환하면 어떤 작업을 수행할지 등) 제어가 더 자세해집니다. 첫 번째 프레임에서 수행하고 싶은 작업, 두 번째 프레임에서 수행하려는 작업), 이를 달성하기 위해 전환을 사용하는 것은 어렵습니다. 이때 이러한 "키 프레임"도 필요합니다. 제어. 그런 다음 CSS3 애니메이션은 "keyframes" 속성을 사용하여 이 효과를 얻습니다. 먼저 키프레임을 살펴보겠습니다.

키프레임에는 고유한 구문 규칙이 있으며 이름은 "@key

<br/>

frames "로 지정됩니다. 시작 부분에 "애니메이션 이름"과 한 쌍의 중괄호 "{}"가 옵니다. 괄호 안에는 CSS 스타일을 작성하는 방법과 비슷한 다양한 기간에 대한 일부 스타일 규칙이 있습니다. "0%"와 "100%" 사이와 같이 여러 백분율로 구성된 "@keyframes"의 스타일 규칙의 경우 이 규칙에서 여러 백분율을 생성할 수 있으며 애니메이션 효과가 있는 요소에 필요한 각 백분율을 제공합니다. 다양한 속성을 추가하여 요소가 이동, 요소 색상, 위치, 크기, 모양 등의 변경과 같이 지속적으로 변화하는 효과를 얻을 수 있도록 합니다. 그러나 주목해야 할 한 가지는 "fromt" 및 "to"를 사용할 수 있다는 것입니다. "는 애니메이션이 시작하고 끝나는 지점을 나타냅니다. 즉, "from"은 "0%"에 해당하고 "to"는 "100%"에 해당합니다. 그 중 "0%"는 생략할 수 없습니다. 다른 속성 값과 마찬가지로 여기에 백분율 기호("%")를 추가해야 합니다. 그렇지 않으면 키프레임이 유효하지 않으며 아무런 효과도 없습니다. 키프레임 단위는 백분율 값만 허용하기 때문입니다. <br/>

<br/>

키프레임은 애니메이션 애니메이션 변경의 키 위치를 결정하기 위해 순서에 관계없이 지정할 수 있습니다. 구체적인 문법 규칙은 다음과 같습니다.

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   
 keyframes-blocks: [ keyframe-selectors block ]* ;   
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*

위의 문법을 종합하면

@keyframes IDENT {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
   }  
   或者全部写成百分比的形式：

@keyframes IDENT {   
   0% {   
      Properties:Properties value;   
   }   
   Percentage {   
      Properties:Properties value;   
   }   
   100% {   
      Properties:Properties value;   
   }   
 }

그 중 IDENT 는 부담없이 선택할 수 있는 애니메이션 이름입니다. 물론, 더 의미가 있을 것입니다. Percentage는 백분율 값을 많이 추가할 수 있습니다. Properties는 left, background 등과 같은 CSS의 속성 이름이고 value는 해당 속성의 속성 값입니다. . from과 to는 각각 0%와 100%에 해당한다는 점을 언급할 가치가 있습니다. 우리는 이것을 이전에 언급했습니다. 지금까지는 Webkit Core가 있는 브라우저만 애니메이션 애니메이션을 지원하므로, 위에 -webkit 접두사를 추가해야 합니다. Firefox5에서는 CSS3의 애니메이션 애니메이션 속성을 지원할 수 있다고 합니다.

예를 살펴보겠습니다.

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

여기서 "test"라는 애니메이션을 정의합니다. 해당 애니메이션은 0%에서 시작하여 100%로 끝나며 계속 진행됩니다. 40%와 60%의 두 가지 프로세스가 있습니다. 위 코드의 구체적인 의미는 테스트 애니메이션이 0%일 때 요소가 왼쪽 위치 100px에 위치하고 배경색이 녹색이 ​​된 다음 40%에 위치한다는 것입니다. , 요소는 왼쪽 위치 150px로 전환되고 배경색은 녹색입니다. 60%에서는 요소가 왼쪽 75px 위치로 전환되고 배경색은 파란색입니다. 100%에서 끝나면 요소는 왼쪽이 100px인 시작점으로 돌아가고 배경색은 빨간색이 됩니다. 이 애니메이션에 실행 시간을 10초만 준다고 가정하면 각 세그먼트의 실행 상태는 아래와 같습니다.

201586182405067.png (499×536)

<br/>

키프레임이 정의된 후 방금 정의한 애니메이션 "테스트"를 어떻게 호출해야 합니까?

<br/>

CSS3 애니메이션은 전환 속성과 유사하며 모두 임의적입니다. 시간이 지남에 따라 요소의 속성 값을 변경합니다. 이들 간의 주요 차이점은 전환이 시간에 따라 CSS 속성을 변경하려면 이벤트(호버 이벤트 또는 클릭 이벤트 등)를 트리거해야 한다는 것입니다. 애니메이션은 이벤트 속성 값을 트리거하지 않고도 시간에 따라 CSS 요소를 명시적으로 변경할 수도 있습니다. 애니메이션 효과. 이런 방식으로 요소에서 애니메이션의 애니메이션 속성을 직접 호출할 수 있습니다. 이를 기반으로 CSS3 애니메이션에는 명확한 애니메이션 속성 값이 필요합니다. 이는 위에서 말한 것처럼 CSS를 다른 시간에 정의하는 키프레임이 필요합니다. ​​다른 기간에 변화하는 요소의 효과를 얻습니다.

<br/>

요소의 애니메이션 속성을 호출하는 방법을 살펴보겠습니다

.demo1 {   
     width: 50px;   
     height: 50px;   
     margin-left: 100px;   
     background: blue;   
     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/  
     -webkit-animation-duration: 10s;/*动画持续时间*/  
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/  
     -webkit-animation-delay: 2s;/*动画延迟时间*/  
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/  
     -webkit-animation-direction: alternate;/*定义动画方式*/  
  }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！