CSSだけを使ってブタが落ちてくるアニメーション

概要

CSSだけを使ってブタさんが跳ね返るようなアニメーションを作ります。

上下と左右のアニメーションをそれぞれ別のスピードで設定し、

端から端まで動かすことによって跳ね返っているように見せています。

デモ

更新して再描画してください。

<div class="contener">
	<div class="word">・&#x1F43D・</div>
	<div class="word">・&#x1F43D・</div>
	<div class="word">・&#x1F43D・</div>
</div>

CSS

セレクタを使用してマルに耳（三角形）をつけています。

.word
{
	border-radius:50%;
	height:50px;
	width:50px;
	line-height: 50px;
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	background-color:#ffb6c1;
	color:#fff;
	animation-name:kfBound;
	animation-duration:2s;
	animation-timing-function:ease-in;
	animation-fill-mode: both;
	position:relative;
}
.word:before
{
	content:' ';
	border-top:13px solid transparent;
	border-bottom:13px solid #ffb6c1;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	position:absolute;
	top:-16px;
	left:-4px;
	height:0px;
	width:0px;
	display:block;
	transform: rotate(-25deg);
}
.word:after
{
	content:' ';
	border-top:13px solid transparent;
	border-bottom:13px solid #ffb6c1;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	position:absolute;
	top:-16px;
	right:-4px;
	height:0px;
	width:0px;
	display:block;
	transform: rotate(25deg);
}

上から落ちてきて弾むようなアニメーション
transformを使って移動とぷよぷよした感触を表現しています。

@keyframes kfBound {
  0%   { transform: scale(0.8, 1.4) translate(0%, -500%); }
  20%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  25%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  35%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  45%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

上から落ちてきて弾んだ後にぶるぶるして傾くアニメーション
小刻みに左右に動かした後に、45度傾けています。

@keyframes kfBound2 {
  0%   { transform: scale(0.8, 1.4) translate(0%, -500%); }
  20%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  25%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  35%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  45%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  80%  { transform: translate(0px, 0px) rotateZ(0deg);}
  81%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  82%  { transform: translate(0px, 0px) rotateZ(0deg);}
  83%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  84%  { transform: translate(0px, 0px) rotateZ(0deg);}
  85%  { transform: translate(0px, 0px) rotateZ(0deg);}
  86%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  87%  { transform: translate(0px, 0px) rotateZ(0deg);}
  88%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  89%  { transform: translate(0px, 0px) rotateZ(0deg);}
  90%  { transform: translate(0px, 0px) rotateZ(0deg);}
  91%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  92%  { transform: translate(0px, 0px) rotateZ(0deg);}
  93%  { transform: translate(2px, 0px) rotateZ(-1deg);}
  94%  { transform: translate(0px, 0px) rotateZ(0deg);}
  95%  { transform: rotate(0deg);}
  100% { transform: rotate(45deg);}
}

動きの指定
アニメーションの開始をセレクタでずらし、
最後のブタさんだけ傾くアニメーションに切り替えています。

.word:nth-of-type(1){animation-delay: .1s;}
.word:nth-of-type(2){animation-delay: .2s;}
.word:nth-of-type(3){animation-delay: .3s;}
.word:last-of-type{animation-name:kfBound2;}