用css動畫寫一個類鐘擺效果

用css動畫寫一個鐘擺效果

新手小白第一次寫部落格,多有不适之處敬請諒解!

加粗樣式最近學習了css3動畫,突發奇想像寫一個鐘擺的效果,類似下圖
           

實際效果圖

附上代碼

Document

<div class="animation">
		<img src="images/radius.png" alt="">
	</div>
	<div class="animation">
		<img src="images/radius.png" alt="">
	</div>
	<div class="animation">
		<img src="images/radius.png" alt="">
	</div>
	<div class="animation">
		<img src="images/radius.png" alt="">
	</div>
	<div class="animation">
		<img src="images/radius.png" alt="">
	</div>
           

css代碼

body{
		padding: 100px;
	}
	
	div.animation {
		width: 100px;
		height: 100px;
		float: left;		
	}
	div:nth-child(1) {		
		animation: one 4s  linear infinite;
	}
	div:nth-child(5){
		animation: three 4s linear infinite;
	}
	div img {
		width: 100%;
		height: auto;
		border-radius: 50%;
	}
	@keyframes one {
		0% {
			transform: translate(0);	
		}
		25% {
			transform: translate(0);
		}
		50% {
			transform: translate(-50px, -10px);
		}
		75% {
			transform: translate(0);
		}
		100%{
			transform: translate(0);
		}
	}
	@keyframes three {
		0% {
			transform: translate(0px);
		}
		25% {
			transform: translate(0px);
		}
		50% {
			transform: translate(0px);			
		}
		75% {
			transform: translate(0px);
		}
		100% {
			transform: translate(50px, -10px);
		}
           

思路這樣的,隻要讓第一個動畫執行完畢後,第二個動畫才開始執行,第二個動畫的執行完畢的時間應該控制在第一個動畫開始的時候