weui cell 學習筆記一

語意化的html   css

.container

　　.page   單頁

　　.slideIn  頁面出現動畫

      animation 

      

.page,.slideIn {
      animation:a .2s forwards;  
}

@-webkit-keyframe a{
   0%{
  -webkit-transform:translate3d(100%,0,0);
     transform:translate3d(100%,0,0);
opacity:0     
}
to{
  -webkit-transform:translateZ(0);
transform:translateZ(0);
opacity:1  
}
}

slideIn 頁面載入良好效果由opacity 0 -> 1   transform 100%-> 0 animation 實現  to   目標的狀態  forwards 保持最後的狀態