一款从左边快速滑出的的css动画|CSS|柏平博客

一款从左边快速滑出的的css动画，代码炒鸡简单，牛逼网站的不二之选哈,请用谷歌，火狐等主流浏览器浏览，拒绝使用ie9以下版本的ie浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>从左边快速滑出-柏平</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
.main{ overflow: hidden;}
.slideleftfast{
	text-align: center;
	width: 300px;
	height: 300px;
	line-height: 300px;
	margin:0 auto;
	background: red;
	border-radius:10px;
	animation-name: slideleftfast;
	-webkit-animation-name: slideleftfast;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	

}

@keyframes slideleftfast {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideleftfast {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}
</style>
<body>
<div class="main">
<div id="obj" class="slideleftfast"><span style="font-size: 32px"><a href="https://www.zbpnice.cn">柏平博客</a></span></div>
</div>
</body>
</html>