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 11:57:55 +09:00
parent c567501392
commit 71f09a7fc9
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -333,3 +333,22 @@
0% { transform: translateX(calc(-100% - 3px)); } 0% { transform: translateX(calc(-100% - 3px)); }
100% { transform: translateX(0%); } 100% { transform: translateX(0%); }
} }
/*** ribbon ***/
@keyframes load-view__ribbon-1 {
0% { transform: translateY(-100%); }
100% { transform: translateY(0%); }
}
@keyframes load-view__ribbon-2 {
0% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
}
@keyframes load-view__ribbon-3 {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
@keyframes load-view__ribbon-4 {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}

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

@ -890,5 +890,23 @@
.arrow:nth-child(3) { div { animation: load-view__arrow 1.7s ease 5.4s forwards; } } .arrow:nth-child(3) { div { animation: load-view__arrow 1.7s ease 5.4s forwards; } }
} }
} }
/**
* ribbons
*/
.ribbons {
.ribbon:nth-child(1) {
div:nth-child(2) { &::after { animation: load-view__ribbon-1 0.9s ease 3.6s forwards; } }
div:nth-child(3) { &::after { animation: load-view__ribbon-2 0.9s ease 4.5s forwards; } }
div:nth-child(4) { &::after { animation: load-view__ribbon-3 1.4s ease 5.4s forwards; } }
div:nth-child(1) { &::after { animation: load-view__ribbon-4 0.6s ease 6.8s forwards; } }
}
.ribbon:nth-child(2) {
div:nth-child(2) { &::after { animation: load-view__ribbon-1 0.9s ease 3.7s forwards; } }
div:nth-child(3) { &::after { animation: load-view__ribbon-2 0.9s ease 4.6s forwards; } }
div:nth-child(4) { &::after { animation: load-view__ribbon-3 1.4s ease 5.5s forwards; } }
div:nth-child(1) { &::after { animation: load-view__ribbon-4 0.6s ease 6.9s forwards; } }
}
}
} }
} }