首页 > 代码库 > 移动端动画整理

移动端动画整理

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

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

  

移动端动画整理