ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーションを使用する場合、どのようなルールを適用する必要がありますか?
CSS3 アニメーションを使用する場合、どのようなルールを適用する必要がありますか?
- (*-*)浩オリジナル
- 2019-05-31 18:00:135516ブラウズ
##CSS3 @keyframes ルール
# @keyframes ルールを使用して、アニメーションを作成できます。
ある CSS スタイル設定から別の CSS スタイル設定に徐々に変更してアニメーションを作成します。 CSS スタイル設定は、アニメーション処理中に何度でも変更できます。 % またはキーワード「from」と「to」(0% ～ 100% と同じ) を使用して、いつ変更が発生するかを指定します。 0% はアニメーションの開始時、100% はアニメーションの完了時です。 (推奨学習:CSS3 ビデオ チュートリアル
。)
ブラウザのサポートを最適化するには、常に 0% と 100% のセレクターを定義する必要があります。
注: アニメーション属性を使用してアニメーションの外観を制御し、セレクターを使用してアニメーションをバインドします。 .
構文
@keyframes animationname {keyframes-selector {css-styles;}}
| 説明 |
| アニメーション名
| 必須。アニメーションの名前を定義します。 |
|
|
必須。アニメーション期間のパーセンテージ。 |
有効な値: 0-100% from (0% と同じ) to (100% と同じ)
| css スタイル
| 必須。 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 サイトの他の関連記事を参照してください。