コーディング豆知識【アニメーション編】

上下　ふわふわ

HTML

<div class="animation fuwafuwa">
	<img src="" alt="">
</div>

css

@keyframes fuwafuwa {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(8%);
	}
	100% {
		transform: translateY(0%);
	}
}
@-webkit-keyframes fuwafuwa {
	0% {
		-webkit-transform: translateY(0%);
	}
	50% {
		-webkit-transform: translateY(8%);
	}
	100% {
		-webkit-transform: translateY(0%);
	}
}
.fuwafuwa{
	animation-name: fuwafuwa;
	-webkit-animation-name: fuwafuwa;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	visibility: visible !important;
}

ハートビート　わくわく

HTML

<div class="animation heartbeat">
	<img src="" alt="">
</div>

css

@keyframes heartbeat {
	0% {
		transform: scale(1);
	}
	10% {
		transform: scale(1.2);
	}
	20% {
		transform: scale(1.4);
	}
	100% {
		transform: scale(1);
	}
}
@-webkit-keyframes heartbeat {
	0% {
		-webkit-transform: scale(1);
	}
	10% {
		-webkit-transform: scale(1.2);
	}
	20% {
		-webkit-transform: scale(1.4);
	}
	100% {
		-webkit-transform: scale(1);
	}
}
.heartbeat {
	animation-name: heartbeat;
	-webkit-animation-name: heartbeat;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	visibility: visible !important;
}

ぴくぴく動く

HTML

<div class="animation wiggle">
	<img src="" alt="">
</div>

css

@keyframes wiggle {
	0% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);
	}
}
@-webkit-keyframes wiggle {
	0% {
		-webkit-transform: rotate(-4deg);
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);
	}
}
.wiggle {
	animation-name: wiggle;
	-webkit-animation-name: wiggle;
	animation-duration: 2.5s;
	-webkit-animation-duration: 2.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	visibility: visible !important;
}