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-21 14:21:19 +09:00
parent d5d5c09191
commit bee4a7c974
2 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,3 +147,60 @@
80% { transform: scale(0); }
100% { transform: scale(1); }
}
/*** block ***/
@keyframes load-view__block1 {
0% { transform: rotate(45deg) translateY(-100px); opacity: 0; }
100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
}
@keyframes load-view__block2 {
0% { transform: rotate(45deg) translateY(100px); opacity: 0; }
100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
}
/*** block-effect ***/
@keyframes load-view__block-effect {
0% { transform: scale(0.6); opacity: 0; border-width: 20px; }
50% { opacity: 1; }
100% { transform: scale(1.4); opacity: 0; border-width: 5px; }
}
/*** char ***/
@keyframes load-view__char1 {
0% { opacity: 0; transform: rotate(-35deg) scale(0.8); }
35% { transform: rotate(-55deg); }
70% { transform: rotate(-35deg); }
100% { opacity: 1; transform: rotate(-55deg) scale(1.0); }
}
@keyframes load-view__char2 {
0% { opacity: 0; transform: translate(20px, 10px) rotate(-45deg); }
100% { opacity: 1; transform: translate(0px, 0px) rotate(-45deg); }
}
@keyframes load-view__char3 {
0% { opacity: 0; transform: translateX(-20px) rotate(-45deg); }
100% { opacity: 1; transform: translateX(0px) rotate(-45deg); }
}
@keyframes load-view__char4 {
0% { opacity: 0; transform: translate(-20px, -20px) rotate(-45deg); }
100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
}
@keyframes load-view__char5 {
0% { opacity: 0; transform: rotate(-45deg) scale(1); }
50% { transform: rotate(-45deg) scale(1.2); }
100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}
@keyframes load-view__char6 {
0% { opacity: 0; transform: translate(0px, 0px) rotate(-45deg); }
25% { transform: translate(-10px, -10px) rotate(-45deg); }
50% { transform: translate(0px, 0px) rotate(-45deg); }
75% { transform: translate(-10px, -10px) rotate(-45deg); }
100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
}
@keyframes load-view__char7 {
0% { opacity: 0; transform: scale(1.4) rotate(-45deg); }
25% { transform: scale(1.2) rotate(-45deg); }
50% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
75% { opacity: 1; transform: scale(1.2) rotate(-45deg); }
100% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
}

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

@ -369,6 +369,35 @@
.block:nth-child(5) { animation: load-view__block1 0.5s ease 0.4s forwards; }
.block:nth-child(6) { animation: load-view__block2 0.5s ease 0.5s forwards; }
.block:nth-child(7) { animation: load-view__block1 0.5s ease 0.6s forwards; }
.block[data-state="true"]:nth-child(1) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char1 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(2) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char2 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(3) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char3 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(4) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char4 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(5) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char5 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(6) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char6 0.8s ease 0s forwards; }
}
.block[data-state="true"]:nth-child(7) {
div { animation: load-view__block-effect 0.5s ease 0s forwards; }
&::after { animation: load-view__char7 0.8s ease 0s forwards; }
}
}
/*** progress-bar ***/