码迷,mamicode.com
首页 > 其他好文 > 详细

weui cell 学习笔记一

时间:2016-03-22 10:09:22      阅读:1008      评论:0      收藏:0      [点我收藏+]

标签:

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

 

weui cell 学习笔记一

标签:

原文地址:http://www.cnblogs.com/gzz-1994/p/5304874.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!