移动端动画整理

浏览数：25 / 时间：2015年06月11日

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

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);
	}
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

移动端动画整理