css3動畫的使用圖片上下循環跳動

animation動畫使用

圖片上下循環跳轉
html代碼：

<div class="siteicon">
		<img src="./siteicon.png" alt="">
		<p>點擊跳轉</p>
	</div>

css代碼：

@keyframes icon{
	0%{
    opacity: 0.8;
		transform: translate(0,0);
	}
	50%{
    opacity: 1;
		transform: translate(5px,15px);
	}
	100%{
    opacity: 0.8;
		transform: translate(0,0);
	}
}
.siteicon{
	width: 200px;
	height: 200px;
	text-align: center;
	margin: 200px auto;
	animation:  icon 3s linear infinite;
}
p{
	color: #f9743a;
}