仿苹果原生头部动画

/*头部动画*/
.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*/