移动端动画整理

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

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

　　

转载于:https://www.cnblogs.com/wallaceyuan/p/4205397.html