Css3 webkit过渡不起作用

Question

有人可以帮我动画div吗？我目前正在开发一个带有从窗口左侧滑动的div的Web。它正在使用chrome和mozilla桌面，但我不能让它在android系统webview上工作。编辑：我还发现当我滚动屏幕时，固定位置的div仍在移动。

我尝试使用@keyframe进行动画，但无论如何它都不起作用。 我在我的xiao mi redmi note pro 3上进行了测试。

这是html，css和js代码。非常感谢任何帮助。

SELECT * FROM `photos` WHERE user_id={your_user_id}

window.onload=init;

function init(){
	//localStorage.clear();

	addEventListener("scroll",detectScroll);
}

function detectScroll(){
	var maxScroll=document.body.scrollHeight-innerHeight;
	var percent=pageYOffset/maxScroll*100;
	console.log(localStorage.getItem("timer"),new Date().getTime());

	if(percent>50 && new Date().getTime()>localStorage.getItem("timer")){
		//debugger;
		var slider=document.getElementsByClassName('box')[0];
		slider.classList.add("slideOut");
	}
}

function minimize(){
	var slider=document.getElementsByClassName('box')[0];
	slider.classList.remove("slideOut");
	slider.classList.add("slideIn");
	localStorage.setItem("timer",new Date().getTime()+1000);
	// localStorage.setItem("timer",setTimeout(function(){
	// 								localStorage.setItem("reopen",1);
	// 								localStorage.setItem("sliderClosed", "open");
	// 								console.log("timeout "+localStorage.getItem("reopen"));
	// 							},10000));
}

/*@keyframes slideOut {
    from {transform:translateX(-110%);}
    to {transform:translateX(0%);}
}

@keyframes slideIn {
    from {transform:translateX(0%);}
    to {transform:translateX(-110%);}
}

@-webkit-keyframes slideOut {
    from {-webkit-transform:translateX(-110%);}
    to {-webkit-transform:translateX(0%);}
}

@-webkit-keyframes slideIn {
    from {-webkit-transform:translateX(0%);}
    to {-webkit-transform:translateX(-110%);}
}*/

* {
	webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img{
	max-width:100%;
	height:auto;
}

.body{
	margin-left:0px;
	margin-right:0px;
	margin-top:56px;
	font-family: arial;
	padding:15px;
}

#container{
	margin-left:auto;
	margin-right:auto;
	width:480px;
	font-family: arial;
}

@media only screen and (min-width: 480px) {
	.box{
		width:480px;
	}
}

.col-xs-12{
	width:100%;
	padding:15px;
}

@media all and (min-width: 768px) {
	#container{
		width:750px;
	}
	.box{
		width:450px;
	}
	.col-sm-9{
		width:75%;
		padding:15px;
	}
	.col-sm-6{
		width:50%;
		padding:15px;
	}
	.col-sm-3{
		width:25%;
		padding:15px;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-width: 992px) {
	#container{
		width:970px;
	}
	.box{
		width:450px;
	}
	.col-md-9{
		width:75%;
		padding:15px;
	}
	.col-md-6{
			width:50%;
			padding:15px;
		}
	.col-md-3{
		width:25%;
		padding:15px;
	}
}

#navbarButton{
	background-color: #E26A50;
	border-radius: 4px;
	border:none;
	color:white;
	padding:7px 25px;
}

#readMore{
	background-color: #f5f5f5;
	border-radius: 4px;
	border:1px solid;
	padding:10px 25px;
}

#emailText{
	border: 1px solid #c7c7c7;
    border-radius: 4px;
    height: 28px;

}

.row{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	/*flex-flow: row wrap;*/
	justify-content:center;
}

.emailForm{
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom:0;
	margin-top:0;
}

.navbar{
	background-color: #e4e4e4;
	padding:5px;
	width:100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
    flex-wrap: wrap;
	justify-content:center;
}

#readMore{
	background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #c7c7c7;
    padding: 10px 25px;
}

.box{
	display:flex;
	justify-content:center;
	background-color: #e4e4e4;
	position: fixed;
	border:none;
	box-shadow:2px -1px 3px #888888;
	border-radius:3px;
	padding:15px;
	left:-120%;
	bottom:0;
	height:auto;
	max-width:100%;
}

#boxTextEmail{
	width:100%;
	height:30px;
	padding:5px;
	border-radius:3px;
	border:1px solid #c7c7c7;
}

.box #boxForm{
	margin-bottom:0px;
}

.box #boxButtonEmail{
	background-color: #0F52BA;
	color:white;
	width:100%;
	height:45px;
	padding:5px;
	border-radius:3px;
	border:none;
}

.slideOut{
	left:0%;
	-webkit-transition:1s;
	-moz-transition:1s;
	transition:1s;
}

.slideIn{
	left:-110%;
	-webkit-transition: 1s;
	-moz-transition:1s;
	transition:1s;
}

.p{
	text-align: left;
}

.box #header{
	font-size: 25px;
	font-style:normal;
}

.box span{
	font-size: 12px;
}

.minimizeSlider{
	background-color: #e4e4e4;
	border:none;
	position:absolute;
	right:0px;
	top:0px;
}