@charset "utf-8";
/*
查看css動畫效果網站animate.style
class="animated bounce infinite"
取代中間的英文
動態名稱
bounce彈跳
flash閃閃
pulse大小漸變
rubberBand擠壓
headShake地震
swing搖擺
tada大搖特搖
wobble音浪太強
jello果凍
heartBeat心跳跳
coupon_move水平翻面
slideInLeft2斜向來回滑動
fadeInLeft_s短距位移
fadeInRight_s
fadeInUp_s
pop_up亮滅閃爍
go1圓形縮放
go2斜角移動
go3斜線移動
go4平線移動
go5平線移動
brightness-play閃光
uptodown-play飄-上下
downtoup-play飄-下上
tossing轉轉3
rotate3-play轉轉4-1
rotate4-play轉轉4
bgupup-play背景飄上
heartbeat-play心跳A
bounce-play彈跳
minbright-play主標微亮
brightness1-play閃光1
brightness2-play閃光2快速
*/
/*水平翻面*/
.coupon_move { animation-name: coupon_move; animation-duration:1s;}
@keyframes coupon_move {
from { opacity: 0; transform: scaleX(0); }
to { opacity: 1; transform: scaleX(1);
}
}
/*斜向來回滑動*/
.slideInLeft2 { -webkit-animation:slideInLeft2 2s ease infinite ; animation:slideInLeft2 2s ease infinite ;}
@keyframes slideInLeft2 {
0% {opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
50% {opacity:1;-webkit-transform:translate(20px, -10px);transform:translate(20px, -10px)}
100% {opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
}
/*短距位移*/
.fadeInLeft_s { animation-name: fadeInLeft_s; animation-duration:1s;}
@keyframes fadeInLeft_s {
from { opacity: 0; transform: translate3d(0, 0, 0); }
to { opacity: 1; transform: translate3d(20%, 0, 0); }
}
/*短距位移*/
.fadeInRight_s { animation-name: fadeInRight_s; animation-duration:1s;}
@keyframes fadeInRight_s {
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 fadeInLeft_s_2 {
from { opacity: 0; transform: translate3d(-20%, 0, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/*短距位移*/
.fadeInUp_s { animation-name: fadeInUp_s; animation-duration:1s;}
@keyframes fadeInUp_s {
from { opacity: 0; transform: translate3d(0, 30%, 0); }
to { opacity: 1; transform: none; }
}
/*亮滅閃爍*/
.pop_up { animation-name: pop_up; animation-duration:0.75s;}
@keyframes pop_up {
from { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 1; }
to { opacity: 1; transform: none; }
}
/*圓形縮放*/
.go1 { -webkit-animation:go1 2s linear infinite ; animation:go1 2s linear infinite ;}
}
@-webkit-keyframes go1{
0% {opacity:0;-webkit-transform:scale(-0.5); transform:scale(-0.5); }
10% {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
80% {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
100% {opacity:0;-webkit-transform:scale(1); transform:scale(1); }
}
@keyframes go1{
0% {opacity:0;-webkit-transform:scale(-0.5); transform:scale(-0.5); }
10% {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
80% {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
100% {opacity:0;-webkit-transform:scale(1); transform:scale(1); }
}
/*斜角移動*/
.go2 { -webkit-animation:go2 8s linear infinite ; animation:go2 8s linear infinite ;}
}
@-webkit-keyframes go2{
0% {opacity:0;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
10% {opacity:1;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
90% {opacity:1;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
100% {opacity:0;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
}
@keyframes go2{
0% {opacity:0;-webkit-transform:none;transform:none}
10% {opacity:1;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
90% {opacity:1;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
100% {opacity:0;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
}
.go4 { -webkit-animation:go4 8s linear infinite ; animation:go4 8s linear infinite ;} }
@-webkit-keyframes go4{
0% {opacity:0;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
10% {opacity:1;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
90% {opacity:1;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
100% {opacity:0;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
}
@keyframes go4{
0% {opacity:0;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
10% {opacity:1;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
90% {opacity:1;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
100% {opacity:0;-webkit-transform:translate(300px, -300px);transform:translate(300px, -300px)}
}
/*斜線*/
.go3 { -webkit-animation:go3 2s linear infinite ; animation:go3 2s linear infinite ; z-index: 2;}
}
@-webkit-keyframes go3{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:0;-webkit-transform:translate(0px, 0px);transform:translate(0px,0px)}
50% {opacity:1;-webkit-transform:translate(-150px, 150px);transform:translate(-150px, 150px)}
100% {opacity:0;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
}
@keyframes go3{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:0;-webkit-transform:translate(0px, 0px);transform:translate(0px,0px)}
50% {opacity:1;-webkit-transform:translate(-150px, 150px);transform:translate(-150px, 150px)}
100% {opacity:0;-webkit-transform:translate(-300px, 300px);transform:translate(-300px, 300px)}
}
/*平線*/
.go4 { -webkit-animation:go4 1.5s linear infinite ; animation:go4 1.5s linear infinite ; z-index: 2;}
}
@-webkit-keyframes go4{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:1;-webkit-transform:translate3d(50%,0,0)}
80% {opacity:0;-webkit-transform:translate3d(80%,0,0)}
100% {opacity:0;-webkit-transform:translate3d(100%,0,0)}
}
@keyframes go4{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:1;-webkit-transform:translate3d(50%,0,0)}
80% {opacity:0;-webkit-transform:translate3d(80%,0,0)}
100% {opacity:0;-webkit-transform:translate3d(100%,0,0)}
}
.go5 { -webkit-animation:go5 1.5s linear infinite ; animation:go5 1.5s linear infinite ; z-index: 2;}
}
@-webkit-keyframes go5{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:1;-webkit-transform:translate3d(-50%,0,0)}
80% {opacity:0;-webkit-transform:translate3d(-80%,0,0)}
100% {opacity:0;-webkit-transform:translate3d(-100%,0,0)}
}
@keyframes go5{
0% {opacity:0;-webkit-transform:none;transform:none}
30% {opacity:1;-webkit-transform:translate3d(-50%,0,0)}
80% {opacity:0;-webkit-transform:translate3d(-80%,0,0)}
100% {opacity:0;-webkit-transform:translate3d(-100%,0,0)}
}
/*閃光*/
.brightness-play { -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%);
}
}
/*飄-上下*/
.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*/
.tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}
@keyframes tossing { 0% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); }
}
@-webkit-keyframes tossing {
0% { -webkit-transform: rotate(-5deg); }
50% { -webkit-transform: rotate(5deg); }
100% { -webkit-transform: rotate(-5deg); }
}
.rotate3-play { -webkit-animation:rotate3-play 20s linear infinite ; animation:rotate3-play 20s linear infinite ;}
@keyframes rotate3-play { 100% { transform: rotate(-360deg); }
}
/*轉轉4*/
.rotate4-play { -webkit-animation:rotate4-play 2s linear infinite ; animation:rotate4-play 2s linear infinite ;}
@keyframes rotate4-play { 100% { transform: rotate(-20deg); }
}
/*背景飄上*/
.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: 2s; 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%); }
}
/*閃光1*/
.brightness1-play { -webkit-animation:brightness1-play 4s infinite ; animation:brightness1-play 4s infinite ;}
@keyframes brightness1-play { 0% { filter:brightness(100%); }
92% { filter:brightness(100%); }
94% { filter:brightness(200%); }
96% { filter:brightness(100%); }
98% { filter:brightness(200%); }
100% { filter:brightness(100%); }
}
/*閃光2快速*/
.brightness2-play { -webkit-animation:brightness2-play 1s infinite ; animation:brightness2-play 1s infinite ;}
@keyframes brightness2-play { 0% { filter:brightness(100%); }
92% { filter:brightness(100%); }
94% { filter:brightness(200%); }
96% { filter:brightness(100%); }
98% { filter:brightness(200%); }
100% { filter:brightness(100%); }
}