css实现抖动效果

简介

预览效果：

代码： 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<head>
	</head>
	<body>
		<div class='aaa'></div>
	</body>
</html>
<style type="text/css">
	body{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.aaa{
		width: 200px;
		height:100px;
		background: #000;
		animation-name: upAnimation;
		transform-origin: center bottom;
		animation-duration: 2s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-delay: .5s;
		margin-top: 60px;
	}
	@keyframes upAnimation{
		0%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
		10%{transform:rotate(-12deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
		20%{transform:rotate(12deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
		28%{transform:rotate(-10deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
		36%{transform:rotate(10deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		42%{transform:rotate(-8deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		48%{transform:rotate(8deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		52%{transform:rotate(-4deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		56%{transform:rotate(4deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		60%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}
		100%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
	}   
</style>


 

上一篇：元素自动放大效果css

上一篇：ajax异步模式下实现同步和等待loading效果（jQuery同步Ajax带来的UI线程阻塞问题及解决办法）

Top