애니메이션을 정의하는 데 사용되는 CSS3의 규칙

css3의 "@keyframes" 규칙을 사용하여 애니메이션을 정의하세요. "@keyframes" 규칙은 CSS 애니메이션 주기의 동작을 정의하고 간단한 애니메이션을 만들 수 있는 애니메이션 규칙을 지정하는 데 사용됩니다. 애니메이션 시퀀스를 따라 키프레임을 설정하여 애니메이션 시퀀스 주기 중 중간 단계를 지정할 수 있습니다.

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

@keyframes는 CSS 애니메이션 기간의 동작을 정의하고 간단한 애니메이션을 만드는 데 사용할 수 있는 CSS3의 규칙입니다.

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

그런 다음 다양한 CSS 애니메이션 속성을 사용하여 애니메이션 반복 횟수, 시작 값과 종료 값 간 교대 여부, 애니메이션 실행 또는 일시 중지 여부 등 애니메이션의 다양한 측면을 제어할 수 있습니다. 애니메이션의 시작 시간이 지연될 수도 있습니다.

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

구문: ​​

@keyframes animation-name {keyframes-selector {css-styles;}}

• animation-name: 이는 필수이며 애니메이션 이름을 정의합니다. animation-name：这是必需的，它定义动画名称。

• keyframes-selector

keyframes-selector: 0%에서 100% 사이의 애니메이션 비율을 정의합니다. 애니메이션에는 많은 선택기가 포함될 수 있습니다.

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}
/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;
    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

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

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%" 및 "100%"는 각각 키프레임 규칙을 정의하는 키프레임 선택기입니다. 키프레임 규칙에 대한 키프레임 선언 블록은 속성과

You로 구성됩니다. 각각 0%와 100% 대신 선택기 키워드 from과 to를 사용할 수도 있습니다.

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

키프레임 선택기는 쉼표로 구분된 하나 이상의 백분율 값으로 구성되거나 from 및 to 키워드로 구성됩니다. 백분율 값에는 단위 지정자를 사용해야 합니다. 따라서 '0'은 잘못된 키프레임 선택기입니다(학습 동영상 공유:

css 동영상 튜토리얼

)

참고: 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 지정하세요.

css 사용 예:

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

HTML 코드:

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

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

css 코드

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. 실행 효과

더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요!

위 내용은 애니메이션을 정의하는 데 사용되는 CSS3의 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!