码迷,mamicode.com
首页 > 移动开发 > 详细

移动端动画整理

时间:2015-01-06 11:22:11      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

每个下滑页面的高度与屏幕大小相同

var winHeight = document.documentElement.clientHeight;

此写法可兼容ios 安卓设备的浏览器高度。

animation:

#slide_one.z-current .singer p.s1 {
    opacity: 1;
    -webkit-animation: 1s twinkling 2.7s ease-in-out both;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

transition:

.chart div:nth-child(3) span{
    display: block;
    height: 0px;
    background: #f8bf56;
    -webkit-transition: all 1s linear 2s;
    transition: all 1s linear 2s;
    -webkit-backface-visibility: hidden;
}

.z-current .chart div:nth-child(1) span{
  height: 120px;
}

 

@keyframes
@-webkit-keyframes picshow04 {
	0% {
		-webkit-transform-origin: 0% 100%;
		-webkit-transform: translate(0px,0px) scale(1.2);
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		-webkit-transform-origin: 0% 100%;
		-webkit-transform: translate(0px,0px) scale(1);
	}
}

  

移动端动画整理

标签:

原文地址:http://www.cnblogs.com/wallaceyuan/p/4205397.html

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