markdown CSSアニメーションふわふ気気球

Posted 2021-05-06

/* ==========================================================
!Fuwafuwa
========================================================== */
.fuwafuwa01 {
	position: relative;
	width: 600px;
	margin: 10px 0 0 0;

	&:before {
		position: absolute;
		top: 30px;
		left: 100px;
		z-index: 1;
		width: 95px;
		height: 100px;
		background: url(https://3.bp.blogspot.com/-ayrWh2hoC8Y/UU--y9cvG5I/AAAAAAAAO9w/d6s_F-XTbTg/s400/kikyuu.png) no-repeat 0 0;
		background-size: contain;
		content: "";
		animation: fuwafuwa1 5s linear 0s infinite;
	}
	&:after {
		position: absolute;
		right: 100px;
		bottom: 20px;
		width: 175px;
		height: 200px;
		background: url(https://3.bp.blogspot.com/-PE3rhZLMGOY/UU--zLHUguI/AAAAAAAAO90/e-Z5WmAQbjU/s400/kikyuu_woman.png) no-repeat 0 0;
		background-size: contain;
		content: "";
		animation: fuwafuwa2 3s linear 0s infinite;
	}
}
@keyframes fuwafuwa1 {
	0%   { transform: translate(0%, 0%); }
	50%  { transform: translate(0%, -20%); }
	100% { transform: translate(0%, 0%); }
}
@keyframes fuwafuwa2 {
	0%   { transform: translate(0%, -10%); }
	50%  { transform: translate(0%, 0%); }
	100% { transform: translate(0%, -10%); }
}

<div class="fuwafuwa01">
	<img src="https://4.bp.blogspot.com/-GY783_04Xsk/VpjBpgEivII/AAAAAAAA25s/G8MR3MGOLkE/s600/bg_natural_sky.jpg" alt="イラスト：空" width="600">
<!-- /.fuwafuwa01 --></div>

CSSアニメーション ふわふわ気球
-----------------


A [Pen](https://codepen.io/di_coder/pen/GBYaGZ) by [di_coder](https://codepen.io/di_coder) on [CodePen](https://codepen.io).

[License](https://codepen.io/di_coder/pen/GBYaGZ/license).