ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS @keyframes ルールの使用方法
CSS @keyframes ルールの使用方法
- 青灯夜游オリジナル
- 2019-05-30 16:25:523991ブラウズ
@keyframes は、CSS アニメーションの期間の動作を定義するために使用できる CSS のルールです。単純なアニメーション効果を作成するには、アニメーション属性と一緒に使用する必要があります。アニメーション プロパティを使用して、アニメーションの外観を制御し、アニメーションをセレクターにバインドします。
CSS @keyframes ルールを使用するにはどうすればよいですか?
アニメーションは @keyframes ルールを通じて作成できます。
構文
@keyframes animationname {keyframes-selector {css-styles;}}アニメーション名: 必須。アニメーションの名前を定義します。
キーフレームセレクター: 必須。アニメーション期間のパーセンテージ。
有効な値:
#● 0-100%
● (0% と同じ)
# ～ (100% と同じ) )
css-styles 必須。 1 つ以上の有効な CSS スタイル属性
説明:
アニメーション作成の原則は、ある CSS スタイル セットを別のスタイル セットに徐々に変更することです。この CSS スタイルのセットは、アニメーション中に複数回変更できます。
変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。 0% はアニメーションの開始時間、100% はアニメーションの終了時間です。ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。
注: アニメーションの外観を制御し、アニメーションをセレクターにバインドするには、アニメーション プロパティを使用してください。
css @keyframes 属性の例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>レンダリング:
以上がCSS @keyframes ルールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。