2021 ソフトウェア設計及び演習用の班Wiki
21::gr01::アニメーション
アニメーション＆遷移(藤澤、和山)
看板内の画像のアニメーション
.img_inf{
position: absolute;
width: 900px;
height: 540px;
top: 105px;
left: 250px;
transform-origin: left bottom 0;
animation-name: rotation;
animation-duration: 0.4s;
animation-iteration-count: 1;
z-index: 2;
}
キャラクターのアニメーション（発表時にはキャラの動きは割愛）
.img_chara{
position:absolute;
width:25%;
top:500px;
left:2px;
z-index:0;
}
看板のアニメーション
.img_kanban{
position: absolute;
left: -250px;
bottom: 0px;
transform-origin: left bottom 0;
animation-name: rotation;
animation-duration: 0.4s;
animation-iteration-count: 1;
transform: translateY(7%) rotate(20deg);
}
.img_kanban img{
width: 55%;
height: auto;
}
アニメーション部
@keyframes rotation{
0%{ transform: translateY(7%) rotate(140deg);}
100%{
opacity: 1;
transform: translateY(7) rotate(20deg);
}
}
- ここから下は発表時の未実装部
キャラクター登場のアニメーション
@keyframes toujou {
from {
transform: translateY(150%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
キャラクターが退場するアニメーション
@keyframes taijou {
0%{
transform: translateX(0);
}
50%{
transform: translateX(20%);
}
100%{
transform: translateX(-150%);
}
}
最終更新日：2021/07/30 14:35:59
