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

fix: firefox, safariでの描画差異をある程度軽減

Browse Source
This commit is contained in:
yuki540 2018-04-17 00:23:55 +09:00
parent 4398fb150f
commit f404749d48
4 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/scss/keyframes/_common.scss
View File

@ -51,3 +51,7 @@
from { width: 0; } from { width: 0; }
to { width: 100%; } to { width: 100%; }
} }
@keyframes height0-100 {
from { height: 0; }
to { height: 100%; }
}

2
src/scss/keyframes/pc/_gab-animation.scss
View File

@ -159,7 +159,7 @@
} }
@keyframes gab-animation__camera { @keyframes gab-animation__camera {
from { perspective: 20px; } from { perspective: 0px; }
to { perspective: 400px; } to { perspective: 400px; }
} }
@keyframes gab-animation__show-layer { @keyframes gab-animation__show-layer {

10
src/scss/modules/pc/_calling.scss
View File

@ -347,7 +347,7 @@
content: ""; display: block; content: ""; display: block;
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: $theme-mint; background-color: $theme-mint;
transform: translateY(-100%); transform: translateY(-101%);
} }
} }
} }
@ -476,10 +476,10 @@
/*** say ***/ /*** say ***/
.calling__say { .calling__say {
.line:nth-child(1) { animation: slide-right 0.35s ease 11s forwards; } .line:nth-child(1) { animation: slide-right 1s ease 11s forwards; }
.line:nth-child(2) { animation: slide-right 0.35s ease 11.2s forwards; } .line:nth-child(2) { animation: slide-right 1s ease 11.2s forwards; }
.line:nth-child(3) { animation: slide-right 0.35s ease 11.4s forwards; } .line:nth-child(3) { animation: slide-right 1s ease 11.4s forwards; }
.line:nth-child(4) { animation: slide-right 0.35s ease 11.6s forwards; } .line:nth-child(4) { animation: slide-right 1s ease 11.6s forwards; }
.img { animation: calling__show-say 0.5s ease 11.9s forwards; } .img { animation: calling__show-say 0.5s ease 11.9s forwards; }
} }

13
src/scss/modules/pc/_gab-animation.scss
View File

@ -289,9 +289,10 @@
&::after { &::after {
content: ""; display: block; content: ""; display: block;
position: absolute; position: absolute;
top: 0; left: 0; bottom: 0; left: 0;
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: $theme-bg; background-color: $theme-bg;
border-radius: 50%;
} }
} }
.char-1 { background-image: url(../images/gab-animation/name/1.png); } .char-1 { background-image: url(../images/gab-animation/name/1.png); }
@ -696,7 +697,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 9.2s forwards; } div:nth-child(2):after { animation: slide-bottom 1s ease 9.2s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.2s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.2s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.2s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.2s forwards; }
.char:after { animation: slide-top 1.8s ease-out 9.2s reverse forwards; } .char:after { animation: height0-100 1.8s ease-out 9.2s reverse forwards; }
} }
.paint:nth-child(2) { .paint:nth-child(2) {
animation: gab-animation__fall-paint-2 0.2s ease 10s forwards; animation: gab-animation__fall-paint-2 0.2s ease 10s forwards;
@ -704,7 +705,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 10.2s forwards; } div:nth-child(2):after { animation: slide-bottom 1s ease 10.2s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.2s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.2s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.2s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.2s forwards; }
.char:after { animation: slide-top 1.8s ease-out 10.2s reverse forwards; } .char:after { animation: height0-100 1.8s ease-out 10.2s reverse forwards; }
} }
.paint:nth-child(3) { .paint:nth-child(3) {
animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards; animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards;
@ -712,7 +713,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 8.7s forwards; } div:nth-child(2):after { animation: slide-bottom 1s ease 8.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 8.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 8.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 8.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 8.7s forwards; }
.char:after { animation: slide-top 1.8s ease-out 8.7s reverse forwards; } .char:after { animation: height0-100 1.8s ease-out 8.7s reverse forwards; }
} }
.paint:nth-child(4) { .paint:nth-child(4) {
animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards; animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards;
@ -720,7 +721,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 10.7s forwards; } div:nth-child(2):after { animation: slide-bottom 1s ease 10.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.7s forwards; }
.char:after { animation: slide-top 1.8s ease-out 10.7s reverse forwards; } .char:after { animation: height0-100 1.8s ease-out 10.7s reverse forwards; }
} }
.paint:nth-child(5) { .paint:nth-child(5) {
animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards; animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards;
@ -728,7 +729,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 9.7s forwards; } div:nth-child(2):after { animation: slide-bottom 1s ease 9.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.7s forwards; } div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; } div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; }
.char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; } .char:after { animation: height0-100 1.8s ease-out 9.7s reverse forwards; }
} }
.frame-top { .frame-top {