问题描述:
如图:黄色框区域做了的是背景图;红色框里的箭头做了一动画(忽上忽下),每次进入页面,背景空白,只显示显示小箭头,手划一下才会出现背景;
解决方案:
给背景加以下css:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
小箭头动画代码:
.movedown{
-webkit-animation: movedown 1s infinite ease-in-out;
animation: movedown 1s infinite ease-in-out;
}
@-webkit-keyframes movedown{
0%{-webkit-transform: translate3d(0,0,0);opacity: 1}
50%{-webkit-transform:translate3d(0,10px,0);opacity: 0.5}
100%{-webkit-transform:translate3d(0,0px,0);opacity: 1}
}
@keyframes movedown{
0%{transform: translate3d(0,0,0);opacity: 1}
50%{transform:translate3d(0,10px,0);opacity: 0.5}
100%{transform:translate3d(0,0px,0);opacity: 1}
}
参考链接:http://www.cnblogs.com/gaoxue/p/3753734.html
转载于:https://www.cnblogs.com/tangbuluo/p/7839131.html