add: ロード画面のフレームにアニメーションを適用
This commit is contained in:
yuki540
parent
2bdb7dc22a
commit
ade257d78c
149
src/scss/keyframes/pc/load-view.scss
Normal file
149
src/scss/keyframes/pc/load-view.scss
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
/*** dire-left ***/
|
||||||
|
@keyframes load-view__dire-left-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
5% { opacity: 0.1; }
|
||||||
|
15% { opacity: 1; }
|
||||||
|
25% { opacity: 1; }
|
||||||
|
35% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-left-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
15% { opacity: 0.1; }
|
||||||
|
25% { opacity: 1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-left-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
25% { opacity: 0.1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-bottom ***/
|
||||||
|
@keyframes load-view__dire-bottom-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
25% { opacity: 0.1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-bottom-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
35% { opacity: 0.1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-bottom-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-right ***/
|
||||||
|
@keyframes load-view__dire-right-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-right-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 1; }
|
||||||
|
85% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-right-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
65% { opacity: 0.1; }
|
||||||
|
75% { opacity: 1; }
|
||||||
|
85% { opacity: 1; }
|
||||||
|
95% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-top ***/
|
||||||
|
@keyframes load-view__dire-top-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
60% { opacity: 0.1; }
|
||||||
|
70% { opacity: 1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
90% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-top-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
70% { opacity: 0.1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-top-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
80% { opacity: 0.1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** rect-bar ***/
|
||||||
|
@keyframes load-view__rect-bar1 {
|
||||||
|
0% { transform: translateX(100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(-100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar2 {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
20% { transform: translateY(-100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar3 {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
80% { transform: translateX(100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar4 {
|
||||||
|
0% { transform: translateY(100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** rect-effect ***/
|
||||||
|
@keyframes load-view__rect-effect1 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
20% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
32% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect2 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
40% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
52% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect3 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
60% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
72% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect4 {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
20% { transform: scale(0); }
|
||||||
|
80% { transform: scale(0); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
@ -60,23 +60,35 @@
|
|||||||
.left {
|
.left {
|
||||||
top: 6px;
|
top: 6px;
|
||||||
div { border-right: solid 25px #fff; }
|
div { border-right: solid 25px #fff; }
|
||||||
|
div:nth-child(1) { animation: load-view__dire-left-3 3s linear 0s infinite; }
|
||||||
|
div:nth-child(2) { animation: load-view__dire-left-2 3s linear 0s infinite; }
|
||||||
|
div:nth-child(3) { animation: load-view__dire-left-1 3s linear 0s infinite; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/** right **/
|
/** right **/
|
||||||
.right {
|
.right {
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
div { border-left: solid 25px #fff; }
|
div { border-left: solid 25px #fff; }
|
||||||
|
div:nth-child(1) { animation: load-view__dire-right-1 3s linear 0s infinite; }
|
||||||
|
div:nth-child(2) { animation: load-view__dire-right-2 3s linear 0s infinite; }
|
||||||
|
div:nth-child(3) { animation: load-view__dire-right-3 3s linear 0s infinite; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/** bottom **/
|
/** bottom **/
|
||||||
.bottom {
|
.bottom {
|
||||||
left: 6px;
|
left: 6px;
|
||||||
div { border-top: solid 25px #fff; }
|
div { border-top: solid 25px #fff; }
|
||||||
|
div:nth-child(1) { animation: load-view__dire-bottom-1 3s linear 0s infinite; }
|
||||||
|
div:nth-child(2) { animation: load-view__dire-bottom-2 3s linear 0s infinite; }
|
||||||
|
div:nth-child(3) { animation: load-view__dire-bottom-3 3s linear 0s infinite; }
|
||||||
}
|
}
|
||||||
/** top **/
|
/** top **/
|
||||||
.top {
|
.top {
|
||||||
right: 6px;
|
right: 6px;
|
||||||
div { border-bottom: solid 25px #fff; }
|
div { border-bottom: solid 25px #fff; }
|
||||||
|
div:nth-child(1) { animation: load-view__dire-top-3 3s linear 0s infinite; }
|
||||||
|
div:nth-child(2) { animation: load-view__dire-top-2 3s linear 0s infinite; }
|
||||||
|
div:nth-child(3) { animation: load-view__dire-top-1 3s linear 0s infinite; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -169,6 +181,20 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
&::after { transform: translateY(100%); }
|
&::after { transform: translateY(100%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// animation ----------------------------------------------------------------------
|
||||||
|
div:nth-child(1) { &::after {
|
||||||
|
animation: load-view__rect-bar1 3s linear 0s infinite;
|
||||||
|
}}
|
||||||
|
div:nth-child(2) { &::after {
|
||||||
|
animation: load-view__rect-bar2 3s linear 0s infinite;
|
||||||
|
}}
|
||||||
|
div:nth-child(3) { &::after {
|
||||||
|
animation: load-view__rect-bar3 3s linear 0s infinite;
|
||||||
|
}}
|
||||||
|
div:nth-child(4) { &::after {
|
||||||
|
animation: load-view__rect-bar4 3s linear 0s infinite;
|
||||||
|
}}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** effect **/
|
/** effect **/
|
||||||
@ -183,6 +209,7 @@
|
|||||||
width: 50px; height: 50px;
|
width: 50px; height: 50px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
animation: load-view__rect-effect4 3s linear 0s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
div:nth-child(1),
|
div:nth-child(1),
|
||||||
@ -198,6 +225,11 @@
|
|||||||
div:nth-child(1) { top: -23.5px; left: -23.5px; }
|
div:nth-child(1) { top: -23.5px; left: -23.5px; }
|
||||||
div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
|
div:nth-child(2) { bottom: -23.5px; left: -23.5px; }
|
||||||
div:nth-child(3) { bottom: -23.5px; right: -23.5px; }
|
div:nth-child(3) { bottom: -23.5px; right: -23.5px; }
|
||||||
|
|
||||||
|
// animation --------------------------------------------------------------------
|
||||||
|
div:nth-child(1) { animation: load-view__rect-effect1 3s linear 0s infinite; }
|
||||||
|
div:nth-child(2) { animation: load-view__rect-effect2 3s linear 0s infinite; }
|
||||||
|
div:nth-child(3) { animation: load-view__rect-effect3 3s linear 0s infinite; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user