/*
https://www.cnblogs.com/starof/p/4968769.html
*/

.s-page-left-mini{
      /*
    animation: fadeinR 5s;
    -webkit-animation: fadeinR 5s; 
  
    -webkit-animation-name:fadeinR;
    -moz-animation-name:fadeinR;
    -ms-animation-name:fadeinR;
    */
    animation-name:pageLeftMini;
    animation-duration: 1s;
    width: 40px;
}
/*
@-webkit-keyframes fadeinR{
    from{opacity:0;-webkit-transform:translateX(-100px);}
    to{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes fadeinR{
    from{opacity:0;-moz-transform:translateX(-100px);}
    to{opacity:1;-moz-transform:translateX(0);}
}
@-ms-keyframes fadeinR{
    from{opacity:0;-ms-transform:translateX(-100px);}
    to{opacity:1;-ms-transform:translateX(0);}
}
*/
@keyframes pageLeftMini{
    from{opacity:1;width: 300px;}
    to{opacity:1;width: 40px;}
}

.s-page-left-max{
    /*
  animation: fadeinR 5s;
  -webkit-animation: fadeinR 5s; 

  -webkit-animation-name:fadeinR;
  -moz-animation-name:fadeinR;
  -ms-animation-name:fadeinR;
  */
  animation-name:pageLeftMax;
  animation-duration: 1s;
  width: 300px;
}
@keyframes pageLeftMax{
    from{opacity:1;width: 40px;}
    to{opacity:1;width: 300px;}
}


.s-page-right-mini
{
    padding-left: 41px;
    animation-name:pageRightMini;
    animation-duration: 1s;
}
@keyframes pageRightMini{
    from{opacity:1;padding-left:300px;}
    to{opacity:1;padding-left:41px;}
}

.s-page-right-max
{
    padding-left: 300px;
    animation-name:pageRightMax;
    animation-duration: 1s;
}
@keyframes pageRightMax{
    from{opacity:1;padding-left:41px;}
    to{opacity:1;padding-left:300px;}
}