@charset "utf-8";
/* CSS Document */
/*由前到後的分別是：[動畫名稱momoco]，[撥放時間1秒]，[10張影格_取決於圖片內有幾個動作]，[撥放幾次_infinite=重複]，[alternate=會倒著撥回去]*/
.model { width: 300px; height: 340px; background: url(model.png?t=1751270321599);
-webkit-animation: model 0.5s steps(2) infinite alternate;
animation: model 0.5s steps(2) infinite alternate;
}
@-webkit-keyframes model {
from { background-position: 0px; }
to { background-position: -600px; }
}
@keyframes model {
from { background-position: 0px; }
to { background-position: -600px; }
}
.model2 { width: 300px; height: 340px; background: url(model2.png?t=1751270321599);
-webkit-animation: model 0.5s steps(2) infinite alternate;
animation: model 0.5s steps(2) infinite alternate;
}
@-webkit-keyframes model2 {
from { background-position: 0px; }
to { background-position: -600px; }
}
@keyframes model2 {
from { background-position: 0px; }
to { background-position: -600px; }
}
/*短距位移*/
@keyframes fadeInLeft_s_2 {
from {
opacity: 0;
transform: translate3d(-20%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft_s_2 {
animation-name: fadeInLeft_s_2;
animation-duration:1s;
}
/*短距位移*/
@keyframes fadeInUp_s {
from {
opacity: 0;
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp_s {
animation-name: fadeInUp_s;
animation-duration:2s;
}
/*右*/
.playR { -webkit-animation:playR 50s linear infinite; animation:playR 80s linear infinite ;}
@-webkit-keyframes playR {
0% { background-position:0 0;}
100% { background-position:2000px 0;}
}
@keyframes playR {
0% { background-position:0 0;}
100% { background-position:2000px 0;}
}
/*左*/
.playL { -webkit-animation:playL 50s linear infinite; animation:playL 80s linear infinite ;}
@-webkit-keyframes playL {
0% { background-position:2000px 0;}
100% { background-position:0 0;}
}
@keyframes playL {
0% { background-position:2000px 0;}
100% { background-position:0 0;}
}
/*右*/
.mbgtop_r-play { -webkit-animation:mbgtop_r-play 50s linear infinite; animation:mbgtop_r-play 80s linear infinite ;}
@-webkit-keyframes mbgtop_r-play {
0% { background-position:0 0;}
100% { background-position: 0 2000px;}
}
@keyframes mbgtop_r-play {
0% { background-position:0 0;}
100% { background-position: 0 2000px;}
}
/*左*/
.mbgtop_L-play { -webkit-animation:mbgtop_L-play 50s linear infinite; animation:mbgtop_L-play 80s linear infinite ;}
@-webkit-keyframes mbgtop_L-play {
0% { background-position:0 2000px ;}
100% { background-position:0 0;}
}
@keyframes mbgtop_L-play {
0% { background-position: 0 2000px;}
100% { background-position:0 0;}
}
/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 1.5s infinite alternate;
animation:uptodown-play 1.5s infinite alternate;}
@-webkit-keyframes uptodown-play {
0% {
-webkit-transform: translate(0,-10px);
}
100% {
-webkit-transform: translate(0,0);
}
}
@keyframes uptodown-play {
0% {
transform: translate(0,-10px);
}
100% {
transform: translate(0,0);
}
}
/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 1.5s infinite alternate;
animation:downtoup-play 1.5s infinite alternate;}
@-webkit-keyframes downtoup-play {
0% {
-webkit-transform: translate(0,0);
}
100% {
-webkit-transform: translate(0,-10px);
}
}
@keyframes downtoup-play {
0% {
transform: translate(0,0);
}
100% {
transform: translate(0,-10px);
}
}
/*轉轉3*/
.rotate3-play { -webkit-animation:rotate3-play 180s linear infinite ;
animation:rotate3-play 180s linear infinite ;}
@keyframes rotate3-play {
100% {
transform: rotate(-360deg);
}
}
/*背景飄上*/
.bgupup-play { -webkit-animation:bgupup-play 40s linear infinite ;
animation:bgupup-play 40s linear infinite ;}
@keyframes bgupup-play {
100% { background-position: center -925px;
}
}
/*心跳A*/
.heartbeat-play {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: heartbeat-play; animation-name: heartbeat-play; -webkit-animation-iteration-count: infinite; animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
@-webkit-keyframes heartbeat-play {
0% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
40% { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
60% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
80% { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
}
@keyframes heartbeat-play {
0% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
40% { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
60% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
80% { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);}
}
/*心跳A*/
.heartbeat-play1 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: heartbeat-play1; animation-name: heartbeat-play1; -webkit-animation-iteration-count: infinite; animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
@-webkit-keyframes heartbeat-play1 {
0% { -webkit-transform: scale(1); transform: scale(1);}
40% { -webkit-transform: scale(0.98); transform: scale(0.98);}
60% { -webkit-transform: scale(1); transform: scale(1); }
80% { -webkit-transform: scale(0.98); transform: scale(0.98);}
100% { -webkit-transform: scale(1); transform: scale(1);}
}
@keyframes heartbeat-play1 {
0% { -webkit-transform: scale(1); transform: scale(1);}
40% { -webkit-transform: scale(0.98); transform: scale(0.98);}
60% { -webkit-transform: scale(1); transform: scale(1);}
80% { -webkit-transform: scale(0.98); transform: scale(0.98);}
100% { -webkit-transform: scale(1); transform: scale(1);}
}
/*彈跳*/
.bounce-play { -webkit-animation:bounce-play 3s linear infinite ;
animation:bounce-play 3s linear infinite ;}
@-webkit-keyframes bounce-play {
0%, 5%, 12.5%, 20%, 25% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
15% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
}
}
@keyframes bounce-play {
0%, 5%, 12.5%, 20%, 25% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
15% {
-webkit-transform: translateY(-5%);
transform: translateY(-5%);
}
}
/*主標微亮*/
.minbright-play { -webkit-animation:minbright-play 2s infinite alternate; animation:minbright-play 2s infinite alternate ;}
@-webkit-keyframes minbright-play {
0% {
filter:brightness(110%);
}
100% {
filter:brightness(100%);
}
}
@keyframes minbright-play {
0% {
filter:brightness(110%);
}
100% {
filter:brightness(100%);
}
}
/*閃光*/
.brightness-play1 { -webkit-animation:brightness-play 3s infinite ;
animation:brightness-play 3s infinite ;}
@-webkit-keyframes brightness-play {
0% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
92% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
94% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(200%);
}
96% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
98% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
100% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
}
@keyframes brightness-play {
0% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
92% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
94% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
96% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
98% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
100% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
}