CSS3 애니메이션을 사용할 때 어떤 규칙을 적용해야 합니까?-CSS 튜토리얼-php.cn

CSS3 애니메이션을 사용할 때 어떤 규칙을 적용해야 합니까?

(*-*)浩

풀어 주다： 2019-06-04 18:02:56

원래의

5583명이 탐색했습니다.

CSS3 @keyframes 규칙

태그 정의 및 사용 지침

@keyframes 규칙을 사용하여 애니메이션을 만들 수 있습니다.

한 CSS 스타일 설정에서 다른 CSS 스타일 설정으로 점진적으로 변경하여 애니메이션을 만듭니다.

애니메이션 프로세스 중에 CSS 스타일 설정을 여러 번 변경할 수 있습니다.

% 또는 키워드 "from" 및 "to"를 사용하여 변경 사항이 발생하는 시기를 지정합니다. 이는 0%~100%와 동일합니다.

0%는 애니메이션이 시작되는 시점이고, 100%는 애니메이션이 끝나는 시점입니다. (권장 학습: CSS3 비디오 튜토리얼.)

최상의 브라우저 지원을 위해서는 항상 0%와 100%에 대한 선택기를 정의해야 합니다.

참고: 애니메이션 속성을 사용하여 애니메이션의 모양을 제어하고 선택기를 사용하여 애니메이션을 바인딩합니다. .

Syntax

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

로그인 후 복사

Values	Description
animationname	필수입니다. 애니메이션의 이름을 정의합니다.
keyframes-selector	필수입니다. 애니메이션 지속 시간의 백분율입니다. 적용 값: 0-100% from(0%와 동일) to(100%와 동일) 참고: 애니메이션 키프레임 선택기를 사용할 수 있습니다.
css 스타일	필수입니다. 하나 이상의 합법적인 CSS 스타일 속성

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

로그인 후 복사

위 내용은 CSS3 애니메이션을 사용할 때 어떤 규칙을 적용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!