ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3でのキーフレームの使い方とは何ですか？
CSS3でのキーフレームの使い方とは何ですか？
- WBOYオリジナル
- 2021-12-15 17:36:108546ブラウズ
CSS のキーフレームは、要素のアニメーション アクションを指定するために使用されます。これはアニメーションを作成するための CSS ルールです。キーフレーム ルールはキーワード「@keyframe」で構成され、構文は「@keyframes アニメーション名 {keyframes」です。 -selector{css -styles;}}」。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 でのキーフレームの使用法とは何ですか
この属性はアニメーション属性と密接に関連しています。
キーフレームとは中国語で「キーフレーム」という意味で、フラッシュを使ったことがある人ならよく理解できると思いますが、フラッシュを知らなくてももちろん問題ありません。
transition 属性を使用すると、トランジション アニメーション効果を実現することもできますが、アニメーション処理をより細かく制御できないため、少し荒くなります。たとえば、指定された範囲内の特定の属性のトランジションを全体的に制御することしかできません。アニメーション属性は @keyframes を使用して、指定された期間内のアニメーションをより細かく分割できます。
構文構造:
@keyframes animationname {keyframes-selector {css-styles;}}パラメータ分析:
animationname: アニメーションの名前を宣言します。
keyframes-selector: アニメーションの継続時間を分割するために使用されます。パーセント形式を使用することも、「from」形式と「to」形式を使用することもできます。 「from」と「to」の形式は、0% と 100% に相当します。常にパーセント形式を使用することをお勧めします。
例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>出力結果:
興味がある場合は、引き続きアクセスしてください:CSS ビデオ チュートリアル。
以上がCSS3でのキーフレームの使い方とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。