CSS @keyframes ルールの使用方法-フロントエンドQ&A-php.cn

CSS @keyframes ルールの使用方法

青灯夜游

リリース： 2019-05-30 16:27:12

オリジナル

3978 人が閲覧しました

@keyframes は、CSS アニメーションの期間の動作を定義するために使用できる CSS のルールです。単純なアニメーション効果を作成するには、アニメーション属性と一緒に使用する必要があります。アニメーションプロパティを使用して、アニメーションの外観を制御し、アニメーションをセレクターにバインドします。

CSS @keyframes ルールの使用方法

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 ルールの使用方法