CSS3에서 키프레임의 사용법은 무엇입니까-CSS 튜토리얼-php.cn

CSS3에서 키프레임의 사용법은 무엇입니까

WBOY

풀어 주다： 2021-12-15 17:36:10

원래의

8323명이 탐색했습니다.

CSS의 키프레임은 애니메이션을 생성하기 위한 CSS 규칙입니다. 키프레임 규칙은 "@keyframe" 키워드로 구성되며 구문은 "@keyframes 애니메이션 이름{keyframes-selector{css"입니다. -스타일;} }".

CSS3에서 키프레임의 사용법은 무엇입니까

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

css3에서 키프레임의 용도는 무엇인가요?

이 속성은 애니메이션 속성과 밀접한 관련이 있습니다.

키프레임을 중국어로 번역하면 "키프레임"이라는 뜻입니다. 물론 플래시를 사용해 본 사람이라면 이 점을 더 잘 이해해야 합니다.

전환 애니메이션 효과는 전환 속성을 사용하여 얻을 수도 있지만 애니메이션 프로세스를 더 정확하게 제어할 수 없기 때문에 약간 거칠습니다. 예를 들어 특정 속성 내에서 전체적으로 전환만 제어할 수 있습니다. time period, animation 속성은 @keyframes를 사용하여 지정된 기간 내에서 애니메이션을 보다 정확하게 나눌 수 있습니다.

문법 구조:

@keyframes animationname {keyframes-selector {css-styles;}}

로그인 후 복사

매개변수 분석:

animationname: 애니메이션의 이름을 선언합니다.

keyframes-selector: 애니메이션 기간을 나누는 데 사용되며, 백분율 형식을 사용하거나 "from" 및 "to" 형식을 사용할 수 있습니다. "from" 및 "to" 형식은 0% 및 100%와 동일합니다. 항상 백분율 형식을 사용하는 것이 좋습니다.

예제는 다음과 같습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 키프레임의 사용법은 무엇입니까