CSSだけでボールが跳ね返るアニメーション

2018.08.09
CSS

1. 概要
2. デモ
3. サンプルコード
- 3.1. HTML
- 3.2. CSS

概要

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

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

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

デモ

サンプルコード

HTML

<div class="container">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
</div>

CSS

@keyframes kyHorizontal {
  0%    { left:0%; }
  100%  { left:85%; }
}
@keyframes kyVertical {
  0%    { top:0%; }
  100%  { top:70%; }
}
.container{
	height:200px;
	width :400px;
	border:1px solid gray;
	position:relative;
}
.circle{
	height:30%;
	width:15%;
	border-radius:50%;
	position:absolute;
}
.circle:nth-child(1){
	background-color:rgba(255,255,0,.3);
	animation: kyHorizontal .5s linear -.1s alternate infinite, kyVertical 3s -.1s linear alternate infinite;
}
.circle:nth-child(2){
	background-color:rgba(255,0,255,.3);
	animation: kyHorizontal 1s linear -.2s alternate infinite, kyVertical 2.5s -.2s linear alternate infinite;
}
.circle:nth-child(3){
	background-color:rgba(0,255,255,.3);
	animation: kyHorizontal 1.5s linear -.3s alternate infinite, kyVertical 2s -.3s linear alternate infinite;
}

前の記事

記事がありません
次の記事

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