CSS3アニメーション
@keyframesでアニメーションを作成する場合、それをセレクターにバインドします。バインドしない場合、アニメーションは効果がありません。
セレクターにバインドするには、少なくとも次の2つのCSS3アニメーションプロパティを指定します。
- アニメーションの名前を指定します
- アニメーションの長さを指定します
<スタイル>
div.div1：hover
{
アニメーション：myfirst 2s; //アニメーションの名前と時間を設定
}
@keyframes myfirst
{
{background：red;}から
{background：yellow;}へ
}
</ style>
CSS3アニメーションとは何ですか？
アニメーションは、要素をあるスタイルから別のスタイルに徐々に変更する効果です。
スタイルは何度でも変更できます。
パーセンテージを使用して変更がいつ発生するかを指定するか、キーワード「from」と「to」を使用してください。これらは0％と100％に相当します。
0％はアニメーションの開始であり、100％はアニメーションの完了です。
@keyframes myfirst
{
0％{background：red;}
25％{background：yellow;}
50％{background：blue;}
100％{background：green;}
}
