feat: 六項優先動畫
This commit is contained in:
@@ -540,4 +540,63 @@ img {
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes access-canceled-breathe {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes concert-stamp-before {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotate(-12deg) scale(1.18);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(-12deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes concert-stamp-after {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: rotate(8deg) scale(1.18);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: rotate(8deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.con-4.con-access-denied[data-tour="ACCESS"]::before {
|
||||
animation: access-canceled-breathe 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.attended::before {
|
||||
animation: concert-stamp-before 0.5s ease-out backwards;
|
||||
}
|
||||
|
||||
.attended::after {
|
||||
animation: concert-stamp-after 0.5s ease-out 0.14s backwards;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.con-4.con-access-denied[data-tour="ACCESS"]::before,
|
||||
.attended::before,
|
||||
.attended::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -448,3 +448,67 @@ header#origin .site-header-inner .subtitle-wrap::after {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 入坑歷程:波浪底線平移+箭頭輕推(僅首頁 #start) */
|
||||
@keyframes fan-journey-wave-drift {
|
||||
0% {
|
||||
background-position: left 0 bottom 3px;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: left 280px bottom 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fan-journey-arrow-nudge {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.home-page #start .fan-journey-wave {
|
||||
animation: fan-journey-wave-drift 14s linear infinite;
|
||||
}
|
||||
|
||||
.home-page #start .fan-journey-wave i {
|
||||
animation: fan-journey-arrow-nudge 1.35s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* 成立的初衷:↑ 指示輕跳(僅首頁 #mission) */
|
||||
@keyframes mission-arrow-bounce {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
|
||||
.home-page #mission .logo-wrapper .arrow-icon,
|
||||
.home-page #mission .mission-moment-wrap .arrow-icon {
|
||||
display: inline-block;
|
||||
animation: mission-arrow-bounce 1.85s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.home-page #start .fan-journey-wave,
|
||||
.home-page #start .fan-journey-wave i,
|
||||
.home-page #mission .logo-wrapper .arrow-icon,
|
||||
.home-page #mission .mission-moment-wrap .arrow-icon {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1345,6 +1345,12 @@ section {
|
||||
mask: url('../images/icon/balloon.svg') center / contain no-repeat;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.fa-before-lead.fa-before-lead--balloon::before {
|
||||
animation: ebook-balloon-float 2.4s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* 金句:基底只放結構:視覺請用 --mission / --awakening,兩句互不覆寫 */
|
||||
.slogan-quote {
|
||||
box-sizing: border-box;
|
||||
@@ -1548,6 +1554,44 @@ a {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.merged-storyline .story-node::before {
|
||||
animation: timeline-diamond-enter 0.55s ease-out backwards;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(1)::before {
|
||||
animation-delay: 0.06s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(2)::before {
|
||||
animation-delay: 0.14s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(3)::before {
|
||||
animation-delay: 0.22s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(4)::before {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(5)::before {
|
||||
animation-delay: 0.38s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(6)::before {
|
||||
animation-delay: 0.46s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(7)::before {
|
||||
animation-delay: 0.54s;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(8)::before {
|
||||
animation-delay: 0.62s;
|
||||
}
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after {
|
||||
content: attr(data-era);
|
||||
position: absolute;
|
||||
@@ -1714,10 +1758,39 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes timeline-diamond-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.72);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ebook-balloon-float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.merged-storyline .timeline-ebook-cta .fa-hand-pointer {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before,
|
||||
.fa-before-lead.fa-before-lead--balloon::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.merged-storyline .story-node h3 {
|
||||
@@ -3058,6 +3131,32 @@ body.totoga2-page .totoga2-split-crossnav {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@keyframes totoga2-nav-current-pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 2px 10px rgba(230, 184, 0, 0.35);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow:
|
||||
0 4px 18px rgba(230, 184, 0, 0.5),
|
||||
0 0 0 3px rgba(255, 204, 0, 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
body.totoga2-page .totoga2-split-crossnav a.btn[aria-current="page"] {
|
||||
animation: totoga2-nav-current-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body.totoga2-page .totoga2-split-crossnav a.btn[aria-current="page"] {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* member/member.html — 黑白水晶交錯格(2×4)與懸賞令海報 */
|
||||
body.member-crystal-page .member-crystal-main {
|
||||
padding: 1.75rem 14px 3rem;
|
||||
|
||||
Reference in New Issue
Block a user