@charset "utf-8";
/* CSS Document */
.animated {
animation-duration: 2s;
animation-fill-mode: both;
}
.animated.zoomIn {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.lefttoright{-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: lefttoright; animation-name:lefttoright; -webkit-animation-iteration-count: infinite; animation-iteration-count:infinite; animation-timing-function: ease-in;}
@-webkit-keyframes lefttoright {
0% { transform: translate(0,0px); opacity:0 }
25% { transform: translate(0,0px); opacity:0 }
50%{ transform: translate(-300px,0); opacity:0; opacity:1;filter:brightness(130%);}
75%{ transform: translate(-100px,0);opacity:0}
100%{ transform: translate(0,0);opacity:0}
}
@keyframes lefttoright {
0% { transform: translate(0,0px); opacity:0 }
25% { transform: translate(0,0px); opacity:0 }
50%{ transform: translate(-300px,0); opacity:0; opacity:1;filter:brightness(130%);}
75%{ transform: translate(-100px,0);opacity:0}
100%{ transform: translate(0,0);opacity:0}
}
/*輸送帶*/
.bgtop_r-play { -webkit-animation:bgtop_r-play 20s linear infinite; animation:bgtop_r-play 60s linear infinite ;}
@-webkit-keyframes bgtop_r-play {
0% { background-position:-1368px 0 ;}
100% { background-position:0 0;}
}
@keyframes bgtop_r-play {
0% { background-position:-1368px 0 ;}
100% { background-position:0px 0;}
}
@media screen and (max-width:767px){
@-webkit-keyframes bgtop_r-play {
0% { background-position:-100vw 0 ;}
100% { background-position:0 0;}
}
@keyframes bgtop_r-play {
0% { background-position:-100vw 0 ;}
100% { background-position:0px 0;}
}
}
.bgtop_l-play { -webkit-animation:bgtop_r-play 160s linear infinite alternate-reverse; animation:bgtop_r-play 160s linear infinite alternate-reverse;}
/*飄-上下*/
.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 20s linear infinite ;
animation:rotate3-play 20s 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%);}
}
/*彈跳*/
.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%);
}
}
/*閃光*/
.lightSweep { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); overflow: hidden; z-index: 9; pointer-events: none;
-webkit-filter: brightness(1.5);
-webkit-mask-size: 300% 200%;
-webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
-webkit-transition: -webkit-mask-position;
-webkit-animation-timing-function: linear;
-webkit-transform: translate3d(0, 0, 0);
-moz-filter: brightness(1.5);
-moz-mask-size: 300% 200%;
-moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
-moz-transition: -webkit-mask-position;
-moz-animation-timing-function: linear;
-moz-transform: translate3d(0, 0, 0);
-o-filter: brightness(1.5);
-o-mask-size: 300% 200%;
-o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
-o-transition: -webkit-mask-position;
-o-animation-timing-function: linear;
-o-transform: translate3d(0, 0, 0);
filter: brightness(1.5);
mask-size: 300% 200%;
mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
transition: -webkit-mask-position;
animation-timing-function: linear;
transform: translate3d(0, 0, 0);
transition-duration: 3s;
animation: move 1.5s ease-out infinite;
}
@keyframes move {
from {
-webkit-mask-position: 150% 0px;
-moz-mask-position: 150% 0px;
-o-mask-position: 150% 0px;
mask-position: 150% 0px;
}
to {
-webkit-mask-position: 0% 0px;
-moz-mask-position: 0% 0px;
-o-mask-position: 0% 0px;
mask-position: 0% 0px;
}
}
/*搖擺聚光燈*/
.shake {
animation-name: shake;
opacity: 1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;}
@keyframes shake {
from {
transform: rotate(-10deg);
transform-origin:0% 100%;
}
to {
transform: rotate(20deg);
transform-origin:0% 100%
}
}
/*搖擺聚光燈*/
.shake2{animation-name: shake2;
opacity: 1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes shake2 {
from {
transform: rotate(10deg);
transform-origin:100% 100%;
}
to {
transform: rotate(-20deg);
transform-origin:100% 100%
}
}
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}