zoukankan      html  css  js  c++  java
  • 仿苹果原生头部动画

    /*头部动画*/
    .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*/
  • 相关阅读:
    11
    消除左递归
    4.K均值算法--应用
    3.K均值算法
    2.机器学习相关数学基础作业
    机器算法学习第一次作业
    第十五次作业
    第十四次作业
    第十三次作业
    第十二次作业
  • 原文地址:https://www.cnblogs.com/lily1010/p/5719157.html
Copyright © 2011-2022 走看看