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 保持最后的状态

 

posted @ 2016-03-22 09:39  隐姓埋名1994  阅读(613)  评论(0)  编辑  收藏  举报