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-22 15:44:31 +09:00
parent 5b8d135a9c
commit e68fa1186e
2 changed files with 176 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -255,3 +255,74 @@
30% { top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; }
100% { top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }
}
/*** figure1 ***/
@keyframes load-view__figure1-1 {
0% { border-top-width: 0; opacity: 0; }
100% { border-top-width: 50px; opacity: 1; }
}
@keyframes load-view__figure1-2 {
0% { height: 0; opacity: 0; }
100% { height: 50px; opacity: 1; }
}
@keyframes load-view__figure1-3 {
0% { transform: translateY(-50px); opacity: 0; }
30% { transform: translateY(0px); opacity: 1; }
65% { transform: translateY(-15px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; }
}
/*** figure2 ***/
@keyframes load-view__figure2-1 {
0% { transform: translateY(-30px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1; }
}
@keyframes load-view__figure2-2 {
0% { transform: translateY(-50px); opacity: 0; }
30% { transform: translateY(0px); opacity: 1; }
65% { transform: translateY(-15px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; }
}
@keyframes load-view__figure2-3 {
0% { transform: translateY(30px) rotate(90deg); opacity: 0; }
100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
}
/*** figure3 ***/
@keyframes load-view__figure3-1 {
0% { transform: translateY(-50px); opacity: 0; }
30% { transform: translateY(0px); opacity: 1; }
65% { transform: translateY(-15px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; }
}
@keyframes load-view__figure3-2 {
0% { transform: translateY(30px) rotate(90deg); opacity: 0; }
100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
}
@keyframes load-view__figure3-3 {
0% { transform: translateY(-30px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1; }
}
@keyframes load-view__figure3-6 {
0% { border-top-width: 0; opacity: 0; }
100% { border-top-width: 50px; opacity: 1; }
}
/*** catchcopy ***/
@keyframes load-view__catchcopy {
0% { opacity: 0; transform: scale(1.15); }
100% { opacity: 1; transform: scale(1.0); }
}
@keyframes load-view__catchcopy-bg1 {
0% { background-color: $theme-light-pink; }
100% { background-color: $theme-bg; }
}
@keyframes load-view__catchcopy-bg2 {
0% { background-color: $theme-bg; }
100% { background-color: #9994A6; }
}
@keyframes load-view__catchcopy-bg3 {
0% { background-color: #9994A6; }
100% { background-color: $theme-pink; }
}

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

@ -690,5 +690,110 @@
&::before { animation: load-view___fail-paint 0.75s ease 2.6s forwards; }
&::after { animation: load-view___fail-paint 0.75s ease 2.8s forwards; }
}
/**
* catchcopy
*/
.catchcopy {
animation:
fadein 0.3s ease 3.55s forwards,
load-view__catchcopy-bg1 0.4s ease 4.5s forwards,
load-view__catchcopy-bg2 0.4s ease 5.4s forwards,
load-view__catchcopy-bg3 0.4s ease 6.8s forwards;
.text-box {
.text-split:nth-child(1) {
.figure {
div:nth-child(1) {
animation:
load-view__figure1-1 0.4s ease 3.6s forwards,
fadeout 0.4s ease 4.5s forwards;
}
div:nth-child(2) {
&::after {
animation:
load-view__figure1-1 0.4s ease 3.8s forwards,
fadeout 0.4s ease 4.5s forwards;
}
}
div:nth-child(3) {
animation:
load-view__figure1-3 0.5s ease 4.0s forwards,
fadeout 0.4s ease 4.5s forwards;
}
}
.text { animation: load-view__catchcopy 0.4s ease 4.5s forwards; }
}
.text-split:nth-child(2) {
.figure {
div:nth-child(1) {
&::before {
animation:
load-view__figure2-1 0.4s ease 4.5s forwards,
fadeout 0.4s ease 5.4s forwards;
}
&::after {
animation:
load-view__figure2-1 0.4s ease 4.6s forwards,
fadeout 0.4s ease 5.4s forwards;
}
}
div:nth-child(2) {
animation:
load-view__figure2-2 0.5s ease 4.8s forwards,
fadeout 0.4s ease 5.4s forwards;
}
div:nth-child(3) {
animation:
load-view__figure2-3 0.4s ease 5s forwards,
fadeout 0.4s ease 5.4s forwards;
}
}
.text { animation: load-view__catchcopy 0.4s ease 5.4s forwards; }
}
.text-split:nth-child(3) {
.figure {
div:nth-child(1) {
animation:
load-view__figure3-1 0.5s ease 5.4s forwards,
fadeout 0.4s ease 6.8s forwards;
}
div:nth-child(2) {
animation:
load-view__figure3-2 0.4s ease 5.6s forwards,
fadeout 0.4s ease 6.8s forwards;
}
div:nth-child(3) {
&::before {
animation:
load-view__figure3-3 0.4s ease 5.8s forwards,
fadeout 0.4s ease 6.8s forwards;
}
&::after {
animation:
load-view__figure3-3 0.4s ease 5.9s forwards,
fadeout 0.4s ease 6.8s forwards;
}
}
div:nth-child(4) {
animation:
load-view__figure3-1 0.5s ease 6.0s forwards,
fadeout 0.4s ease 6.8s forwards;
}
div:nth-child(5) {
animation:
load-view__figure3-2 0.4s ease 6.2s forwards,
fadeout 0.4s ease 6.8s forwards;
}
div:nth-child(6) {
animation:
load-view__figure3-6 0.4s ease 6.4s forwards,
fadeout 0.4s ease 6.8s forwards;
}
}
.text { animation: load-view__catchcopy 0.4s ease 6.8s forwards; }
}
}
}
}
}