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

add: gab-animationのフレームにスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-04 21:20:12 +09:00
parent aec37c0c26
commit 7842544d0e
3 changed files with 157 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/gab-animation/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

78
src/scss/keyframes/pc/_gab-animation.scss Normal file
View File

@ -0,0 +1,78 @@
@keyframes gab-animation__fall-frame {
0% { top: -100px; }
50% { top: calc(50% + 180px); transform: scale(1); }
60% { top: calc(50% + 180px); transform: scale(1.4, 0.8); }
70% { transform: scale(1); }
100% { top: calc(50% - 50px); }
}
@keyframes gab-animation__scale-frame {
0% { transform: scale(1); opacity: 1; }
25% { transform: scale(3,2); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
75% { transform: scale(2,3); opacity: 0.5; }
100% { transform: scale(1); opacity:1; }
}
@keyframes gab-animation__open-frame {
from {
top: calc(50% - 50px); left: calc(50% - 50px);
width: 100px; height: 100px;
border-radius: 50%;
}
to {
top: 40px; left: 40px;
width: calc(100% - 80px); height: calc(100% - 80px);
border-radius: 0%;
}
}
@keyframes gab-animation__move-y1-area-1 {
from { transform: translate(0, 0); }
to { transform: translate(0, -50px); }
}
@keyframes gab-animation__move-y2-area-1 {
from { transform: translate(calc(-100% + 5px), -50px); }
to { transform: translate(calc(-100% + 5px), 100%); }
}
@keyframes gab-animation__move-y1-area-2 {
from { transform: translate(0, 0); }
to { transform: translate(0, 50px); }
}
@keyframes gab-animation__move-y2-area-2 {
from { transform: translate(calc(100% - 5px), 50px); }
to { transform: translate(calc(100% - 5px), -100%); }
}
@keyframes gab-animation__move-x-area-1 {
from { transform: translate(0, -50px); }
to { transform: translate(calc(-100% + 5px), -50px); }
}
@keyframes gab-animation__move-x-area-2 {
from { transform: translate(0, 50px); }
to { transform: translate(calc(100% - 5px), 50px); }
}
@keyframes gab-animation__move-y-area-bg-1 {
from { transform: translate(calc(-100% + 5px), -100%); }
to { transform: translate(calc(-100% + 5px), 0%); }
}
@keyframes gab-animation__move-y-area-bg-2 {
from { transform: translate(calc(100% - 5px), 100%); }
to { transform: translate(calc(100% - 5px), 0%); }
}
@keyframes gab-animation__move-x-area-bg-1 {
from { transform: translate(calc(-100% + 5px), 0%); }
to { transform: translate(0, 0%); }
}
@keyframes gab-animation__move-x-area-bg-2 {
from { transform: translate(calc(100% - 5px), 0%); }
to { transform: translate(0, 0%); }
}
@keyframes gab-animation__radius-frame {
from { border-radius: 0; }
to { border-radius: 8px; }
}
@keyframes gab-animation__show-bg {
from { opacity: 0; }
to { opacity: 0.2; }
}

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

@ -5,6 +5,7 @@
width: 100%; height: 100%;
min-width: $min-width; min-height: $min-height;
background-color: $theme-light-pink;
overflow: hidden;
z-index: 1001;
}
@ -21,6 +22,47 @@
}
}
/*** frame ***/
.gab-animation__frame {
position: absolute;
top: -100px; left: calc(50% - 50px);
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
.area {
position: relative;
float: left;
width: 50%; height: 100%;
overflow: hidden;
&::before,
&::after {
content: ""; display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
&::before { background-color: $theme-light-pink; }
&::after { background-color: $theme-purple; }
}
.area:nth-child(1) {
&::after { transform: translate(calc(-100% + 5px), -100%); }
}
.area:nth-child(2) {
&::after { transform: translate(calc(100% - 5px), 100%); }
}
&::after {
content: ""; display: block;
position: absolute;
width: 100%; height: 100%;
background-image: url(../images/gab-animation/bg.png);
background-size: 30px;
opacity: 0;
}
}
/*************************************************************************************************
* animation
*************************************************************************************************/
@ -35,5 +77,42 @@
div:nth-child(7) { animation: slide-right 0.4s ease 0.6s forwards; }
div:nth-child(8) { animation: slide-right 0.4s ease 0.7s forwards; }
}
.gab-animation__frame {
animation:
gab-animation__fall-frame 0.5s ease-out 1.1s forwards,
gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards,
gab-animation__open-frame 0.4s ease-in-out 2.3s forwards,
gab-animation__radius-frame 1s ease-in-out 3.8s forwards;
&::after { animation: gab-animation__show-bg 0.4s ease 3.8s forwards; }
.area:nth-child(1) {
&::before {
animation:
gab-animation__move-y1-area-1 0.3s ease 2.7s forwards,
gab-animation__move-x-area-1 0.4s ease 3s forwards,
gab-animation__move-y2-area-1 0.3s ease 3.4s forwards;
}
&::after {
animation:
gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards,
gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards;
}
}
.area:nth-child(2) {
&::before {
animation:
gab-animation__move-y1-area-2 0.3s ease 2.7s forwards,
gab-animation__move-x-area-2 0.4s ease 3s forwards,
gab-animation__move-y2-area-2 0.3s ease 3.4s forwards;
}
&::after {
animation:
gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards,
gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards;
}
}
}
}
}