/*头部动画*/
.header-from-center-to-left .ui-header-title {
-webkit-animation: headerFromCenterToLeft 400ms ease 1;
animation: headerFromCenterToLeft 400ms ease 1;
}
.header-from-right-to-center .ui-header-title {
-webkit-animation: headerFromRightToCenter 400ms ease 1;
animation: headerFromRightToCenter 400ms ease 1;
}
.header-from-center-to-right .ui-header-title {
-webkit-animation: headerFromCenterToRight 400ms ease 1;
animation: headerFromCenterToRight 400ms ease 1;
}
.header-from-left-to-center .ui-header-title {
-webkit-animation: headerFromLeftToCenter 400ms ease 1;
animation: headerFromLeftToCenter 400ms ease 1;
}
.header-from-center-to-left .ui-header-left,
.header-from-center-to-left .ui-header-right,
.header-from-center-to-right .ui-header-left,
.header-from-center-to-right .ui-header-right {
-webkit-animation: opacityEaseoutAnimate 400ms ease 1;
animation: opacityEaseoutAnimate 400ms ease 1;
}
.header-from-right-to-center .ui-header-left,
.header-from-right-to-center .ui-header-right,
.header-from-left-to-center .ui-header-left,
.header-from-left-to-center .ui-header-right {
-webkit-animation: opacityEaseinAnimate 400ms ease 1;
animation: opacityEaseinAnimate 400ms ease 1;
}
@-webkit-keyframes headerFromCenterToLeft {
0%{ -webkit-transform: translateX(0); opacity: 1;}
100%{ -webkit-transform: translateX(-0.8rem); opacity: 0;}
}
@keyframes headerFromCenterToLeft {
0%{ -webkit-transform: translateX(0); opacity: 1;}
100%{ -webkit-transform: translateX(-0.8rem); opacity: 0;}
}
@-webkit-keyframes headerFromRightToCenter {
0%{ -webkit-transform: translateX(0.8rem); opacity: 0;}
100%{ -webkit-transform: translateX(0); opacity: 1;}
}
@keyframes headerFromRightToCenter {
0%{ transform: translateX(0.8rem); opacity: 0;}
100%{ transform: translateX(0); opacity: 1;}
}
@-webkit-keyframes headerFromCenterToRight {
0%{ -webkit-transform: translateX(0); opacity: 1;}
100%{ -webkit-transform: translateX(0.8rem); opacity: 0;}
}
@keyframes headerFromCenterToRight {
0%{ transform: translateX(0); opacity: 1;}
100%{ transform: translateX(0.8rem); opacity: 0;}
}
@-webkit-keyframes headerFromLeftToCenter {
0%{ -webkit-transform: translateX(-0.8rem); opacity: 0;}
100%{ -webkit-transform: translateX(0); opacity: 1;}
}
@keyframes headerFromLeftToCenter {
0%{ transform: translateX(-0.8rem); opacity: 0;}
100%{ transform: translateX(0); opacity: 1;}
}
@-webkit-keyframes opacityEaseinAnimate {
0%{ opacity: 0;}
100%{ opacity: 1;}
}
@keyframes opacityEaseinAnimate {
0%{ opacity: 0;}
100%{ opacity: 1;}
}
@-webkit-keyframes opacityEaseoutAnimate {
0%{ opacity: 1;}
100%{ opacity: 0;}
}
@keyframes opacityEaseoutAnimate {
0%{ opacity: 1;}
100%{ opacity: 0;}
}
/*头部动画 end*/
