大原則
状態:-
閲覧数:2,491
投稿日:2015-01-13
更新日:2015-09-22
複数キーフレームアニメーション名
・指定可能
・複数指定した場合、「先に指定したキーフレームアニメーション内容」を実行した後、「後に指定したキーフレームアニメーション内容」を実行するのではない
・指定可能
・複数指定した場合、「先に指定したキーフレームアニメーション内容」を実行した後、「後に指定したキーフレームアニメーション内容」を実行するのではない
複数キーフレームアニメーション名を指定
構文
「anim1」「anim2」は同時進行
・anim1の後にanim2が実行されるのではない
@keyframes anim1{
0%{プロパティ:値;}
100%{プロパティ:値;}
}
@keyframes anim2{
0%{プロパティ:値;}
100%{プロパティ:値;}
}
.クラス名{
animation-name:anim1,anim2;
}%指定の進行制御は、キーフレームアニメーション毎に異なっていても良い
@keyframes anim1{
0%{プロパティ:値;}
50%{プロパティ:値;}
100%{プロパティ:値;}
}
@keyframes anim2{
0%{プロパティ:値;}
100%{プロパティ:値;}
}
.クラス名{
animation-name:anim1,anim2;
}「transform:rotate();」と「transform:scale();」のプロパティ名は同じ
正常動作しない例
「異なるキーフレームアニメーション名」に、同じプロパィ名を指定できない
・「transformの異なる値」を記述できない
・指定した場合、後に書いた指定は無視される
回転だけ実行される例
@keyframes anim1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@keyframes anim2{
0%{transform: scale(1);}
100%{transform: scale(2.5);}
}
.クラス名{
animation-name:anim1,anim2;
}拡大のみ実行される例
@keyframes anim1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@keyframes anim2{
0%{transform: scale(1);}
100%{transform: scale(2.5);}
}
.クラス名{
animation-name:anim2,anim1;
}正常動作する例
「同じプロパティ名の異なる値」は、「同じキーフレームアニメーション名」で指定
@keyframes anim1{
0%{transform:rotate(0deg) scale(1);}
100%{transform:rotate(360deg) scale(2.5);}
}
.クラス名{
animation-name:anim1;
}「異なるプロパティ名」なら、さらに別の「キーフレームアニメーション名」で指定可能
@keyframes anim1{
0%{transform:rotate(0deg) scale(1);}
100%{transform:rotate(360deg) scale(2.5);}
}
@keyframes anim2{
0%{opacity:0.0;}
100%{opacity:1.0;}
}
.クラス名{
animation-name:anim1,anim2;
}