php 画像をふわふわさせるCSS

Posted 2021-05-05

.fluffy {
	background: #000;
	width: 100px;
	height: 100px;
	margin: 100px;
	animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
	0% { transform:translateY(0) }
	5% { transform:translateY(0) }
	10% { transform:translateY(0) }
	20% { transform:translateY(-15px) }
	25% { transform:translateY(0) }
	30% { transform:translateY(-15px) }
	50% { transform:translateY(0) }
	100% { transform:translateY(0) }
}

<div class="fluffy"></div>