css3 @keyframes 属性
翻訳結果:
UK [freɪmz] US [freɪmz]
n. ボーダー; フレーム (フレームの複数名詞); メガネフレーム; 組織
css3 @keyframes 属性構文
機能:@keyframes ルールを通じて、アニメーションを作成できます。
説明: アニメーション作成の原則は、ある CSS スタイル セットを別のスタイル セットに徐々に変更することです。この CSS スタイルのセットは、アニメーション中に複数回変更できます。変更がいつ発生するかをパーセントで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。 0% はアニメーションの開始時間、100% はアニメーションの終了時間です。ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。
注: アニメーションの外観を制御し、アニメーションをセレクターにバインドするには、アニメーション プロパティを使用してください。
css3 の @keyframes 属性は、@keyframes 原則に従ってアニメーションを作成できることを示します。つまり、ある CSS スタイルのセットが別のスタイルのセットに徐々に変化します。
css3 @keyframes 属性例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px;} 25% {top:200px;} 75% {top:50px} 100% {top:100px;} } </style> </head> <body> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>
インスタンスの実行 »
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します