仿蘋果原生頭部動畫

標籤：

/*頭部動畫*/.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*/

 

仿蘋果原生頭部動畫