CSS3의 @keyframe은 무엇입니까?

이 글의 내용은 CSS3의 @keyframes가 무엇인지 소개하여 @keyframes의 사용법을 쉽게 이해할 수 있도록 하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3 @keyframes란 무엇인가요? 무슨 소용이 있나요?

@keyframes는 CSS 애니메이션 주기의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 CSS3의 규칙입니다. [추천 관련 비디오 튜토리얼: CSS3 튜토리얼]

애니메이션은 둘 다 시간이 지남에 따라 CSS 속성을 변경하는 값을 나타낸다는 점에서 전환과 유사합니다. 주요 차이점은 속성 값이 변경되면(예: 마우스 오버 시 속성 값이 변경되는 경우) 전환이 암시적으로 트리거되지만 애니메이션 속성이 적용될 때 애니메이션이 명시적으로 수행된다는 것입니다. 따라서 애니메이션은 애니메이션 속성에 대한 명시적인 값을 표시해야 합니다. 이 값은 @keyframes 규칙에 지정된 애니메이션 키프레임에 의해 정의됩니다. 따라서 @keyframes 규칙은 시간에 따라 속성 값이 어떻게 변하는지 설명하는 캡슐화된 CSS 스타일 규칙 세트로 구성됩니다.

그런 다음 다양한 CSS 애니메이션 속성을 사용하여 애니메이션 반복 횟수, 시작 값과 끝 값을 번갈아 표시하는지 여부, 애니메이션을 실행하거나 일시 중지해야 하는지 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.

@keyframe 규칙은 "@keyframe" 키워드, 애니메이션 이름을 제공하는 식별자(animation-name을 사용하여 참조됨), 스타일 규칙 세트(중괄호로 구분)로 구성됩니다. 그런 다음 식별자를 animation-name 속성의 값으로 사용하여 애니메이션이 요소에 적용됩니다. 예:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

@keyframes 규칙의 중괄호 안에는 무엇이 있나요?

중괄호 안에 애니메이션 중 특정 지점에서 애니메이션되는 속성 값을 지정하는 키프레임이나 웨이포인트를 정의해야 합니다. 이를 통해 애니메이션 시퀀스의 중간 단계를 제어할 수 있습니다. 예를 들어 간단한 애니메이션 @keyframe은 다음과 같습니다.

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

실행 효과:

'0%', '50%', '100%'는 키프레임 선택기이며, 각 선택기는 하나의 키프레임 규칙을 정의합니다. 키프레임 규칙의 키프레임 선언 블록은 속성과 값으로 구성됩니다.

위 애니메이션은 간단한 전환 효과와 유사합니다. 배경색은 애니메이션 시작 시 한 값(0%)에서 시작하여 중간에 한 값(50%)에 도달하고 마지막에 다른 값(100%)에 도달합니다. 애니메이션 끝. "0%", "50%" 및 "100%" 키프레임 선택기는 애니메이션 속성이 값을 변경하려는 중간 지점 또는 백분율 지점을 정의합니다. 각각 0%와 100%를 사용하는 대신 선택기 키워드 from, to를 사용할 수도 있습니다.

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

키프레임 선택기는 쉼표로 구분된 하나 이상의 백분율 값 또는 from 및 to 키워드로 구성됩니다. 백분율 값에는 백분율 단위 지정자를 사용해야 합니다. 따라서 '0'은 유효하지 않은 키프레임 선택기입니다.

다음은 쉼표로 구분된 여러 백분율 값 및/또는 키워드 키프레임 선택기 from 및 to를 포함하는 키프레임 선택기가 있는 애니메이션의 예입니다.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

위의 @keyframes 규칙은 다음을 정의합니다. 요소의 상단 오프셋은 애니메이션의 시작, 중간, 끝에서 0과 같고 1/4 및 3/4 지점에서 100픽셀과 같습니다. 요소는 애니메이션 루프에서 여러 번 위아래로 움직입니다.

@keyframes 규칙을 사용하여 간단한 애니메이션 만들기:

1. 애니메이션이 발생하는 공간 정의

HTML 코드:

<div class="container">
  <div class="element"></div>
</div>

2. @keyframes 규칙을 사용하여 간단한 애니메이션 만들기

css code

body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 50px auto;
  min-width: 320px;
  max-width: 500px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0099cc;
  border-radius: 50%;
  position: relative;
  top: 0;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

@keyframes bounce {
  from {
    top: 100px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    top: 50px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  50% {
    top: 150px;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  75% {
    top: 75px;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    top: 100px;
  }
}

3. Running effect

위의 예에서는 "bounce"라는 애니메이션에 5개의 키프레임이 할당되었습니다. 첫 번째와 두 번째 키프레임 사이(예: '0%'와 '25%' 사이)에는 완화 타이밍 기능을 사용합니다. 두 번째와 세 번째 키프레임 사이(예: '25%'~'50%' 사이)에는 Ease-In 타이밍 기능 등을 사용합니다. 요소가 50px 위로 이동하면 효과가 나타나고, 가장 높은 지점에 도달하면 속도가 느려지고, 다시 150px로 떨어지면 속도가 빨라집니다. 애니메이션의 후반부도 비슷한 방식으로 작동하지만 요소를 25px 위로만 이동합니다. 이 애니메이션은 공이 튀는 애니메이션을 시뮬레이션하는 데 사용할 수 있는 튀는 효과를 만듭니다.

참고:

@keyframes 규칙은 계단식으로 적용되지 않으므로 애니메이션은 여러 @keyframes 규칙에서 키프레임을 파생하지 않습니다.

키프레임 세트를 결정하려면 선택기의 모든 값을 시간 증가순으로 정렬해야 합니다. 중복된 항목이 있는 경우(예: 두 개의 '50%' 키프레임 규칙과 선언 블록을 작성한 경우) @keyframes 규칙은 해당 시간에 대한 키프레임 정보를 제공하는 데 마지막 키프레임이 사용되도록 지정합니다. @keyframes 여러 키프레임이 동일한 키프레임 선택기 값을 지정하는 경우 규칙에 계단식이 없습니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

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