カテゴリー:
アニメーション
閲覧数:500 配信日:2015-01-13 12:56
正常動作しない例
「異なるキーフレームアニメーション名」に、同じプロパィ名を指定できない
・「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;
}