MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: バトルパネルにアニメーションを適用

Browse Source
This commit is contained in:
yuki540 2018-02-23 16:51:01 +09:00
parent a3e301ab39
commit de78341759
2 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/scss/keyframes/pc/load-view.scss
View File

@ -409,3 +409,38 @@
50% { transform: translateY(-75px) scale(1); }
100% { transform: translateY(-75px) scale(0); }
}
/*** player ***/
@keyframes load-view__player-scale {
0% { transform: scale(1.4); }
30% { transform: scale(1.02); }
100% { transform: scale(1); }
}
@keyframes load-view__player1 {
0% { transform: translate(-100px, 70px); opacity: 0; }
30% { transform: translate(-5px, 2.5px); opacity: 1; }
100% { transform: translate(0px, 0px); opacity: 1; }
}
@keyframes load-view__player2 {
0% { transform: translate(100px, -70px); opacity: 0; }
30% { transform: translate(5px, -2.5px); opacity: 1; }
100% { transform: translate(0px, 0px); opacity: 1; }
}
/*** cross ***/
@keyframes load-view__cross1 {
0% { transform: rotate(0deg); opacity: 0; }
100% { transform: rotate(45deg); opacity: 1; }
}
@keyframes load-view__cross2 {
0% { transform: rotate(0deg); opacity: 0; }
100% { transform: rotate(-45deg); opacity: 1; }
}
/*** circle ***/
@keyframes load-view__circle {
0% { transform: scale(0) rotate(-5deg); }
100% { transform: scale(1) rotate(-5deg); }
}

36
src/scss/modules/pc/load-view.scss
View File

@ -1135,5 +1135,41 @@
&::after { animation: load-view__collision-effect2 0.6s ease 9s forwards; }
}
}
/**
* battle-panel
*/
.battle-panel {
/*** player ***/
.player:nth-child(1) {
animation:
load-view__player1 1.4s ease 12.5s forwards,
load-view__player1 0.8s ease 13.4s reverse forwards;
div { &::after { animation: load-view__player-scale 0.8s ease-out 12.5s forwards; } }
}
.player:nth-child(2) {
animation:
load-view__player2 1.4s ease 12.5s forwards,
load-view__player2 0.8s ease 13.4s reverse forwards;
div { &::after { animation: load-view__player-scale 0.8s ease-out 12.5s forwards; } }
}
/*** cross ***/
.cross {
animation:
load-view__circle 0.4s ease 12.5s forwards,
load-view__circle 0.4s ease 13.9s reverse forwards;
&::before {
animation:
load-view__cross1 0.4s ease 12.6s forwards,
load-view__cross1 0.4s ease 13.8s reverse forwards;
}
&::after {
animation:
load-view__cross2 0.4s ease 12.6s forwards,
load-view__cross2 0.4s ease 13.8s reverse forwards;
}
}
}
}
}