CSS3 アニメーションを使用する場合、どのようなルールを適用する必要がありますか?-CSSチュートリアル-php.cn

CSS3 アニメーションを使用する場合、どのようなルールを適用する必要がありますか?

(*-*)浩

リリース： 2019-06-04 18:02:56

オリジナル

5601 人が閲覧しました

##CSS3 @keyframes ルール

タグの定義と使用手順

# @keyframes ルールを使用して、アニメーションを作成できます。

ある CSS スタイル設定から別の CSS スタイル設定に徐々に変更してアニメーションを作成します。

CSS スタイル設定は、アニメーション処理中に何度でも変更できます。

% またはキーワード「from」と「to」(0% ～ 100% と同じ) を使用して、いつ変更が発生するかを指定します。

0% はアニメーションの開始時、100% はアニメーションの完了時です。 (推奨学習:

CSS3 ビデオチュートリアル
。)
ブラウザのサポートを最適化するには、常に 0% と 100% のセレクターを定義する必要があります。
注: アニメーション属性を使用してアニメーションの外観を制御し、セレクターを使用してアニメーションをバインドします。 .

構文

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

ログイン後にコピー

値アニメーション名 keyframes-selectorcss スタイル例:

説明
必須。アニメーションの名前を定義します。
必須。アニメーション期間のパーセンテージ。	有効な値: 0-100% from (0% と同じ) to (100% と同じ) 注:アニメーション化されたキーフレームセレクター。
必須。 1 つ以上の有効な 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 中国語 Web サイトの他の関連記事を参照してください。