円形に徐々に表示されるアニメーション

2016.02.01

HTML・CSS

回転しながら徐々に表示されていくアニメーションを実装してみます。

右半分を徐々に表示する

まずは右半分が徐々に表示されているアニメーションを実装してみます。

HTML

<div class="circle-wrap">
	<div class="circle-right">
		<div class="circle-right-hidden">
			<div class="circle"></div>
		</div>
	</div>
</div>

CSS

.circle-wrap {
	position: relative;
	width: 50px;
	height: 50px;
}
.circle {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #E74C3C;
}

.circle-right {
	position: absolute;
	left: 25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
}
.circle-right-hidden {
	position: relative;
	left: -25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateRight 2s linear infinite;
	animation: rotateRight 2s linear infinite;
}
@-webkit-keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

.circle-rightで右半分だけ表示するようにして、子要素の.circle-right-hiddenを回転させて徐々に表示するようにしています。
右半分を徐々に表示するのデモページ
　

左半分を徐々に表示する

先ほどのCSSを少し変更して、左半分を徐々に表示してみます。

HTML

<div class="circle-wrap">
	<div class="circle-left">
		<div class="circle-left-hidden">
			<div class="circle"></div>
		</div>
	</div>
</div>

CSS

.circle-wrap {
	position: relative;
	width: 50px;
	height: 50px;
}
.circle {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #E74C3C;
}

.circle-left {
	width: 25px;
	height: 50px;
	overflow: hidden;
}
.circle-left-hidden {
	position: relative;
	left: 25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateLeft 2s linear infinite;
	animation: rotateLeft 2s linear infinite;
}
.circle-left .circle {
	position: relative;
	left: -25px;
}
@-webkit-keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

左半分を徐々に表示するデモページ
　

円形に徐々に表示する

右半分と左半分のアニメーションを組み合わせて、円形に徐々に表示するアニメーションを実装します。

HTML

<div class="circle-wrap">
	<div class="circle-right">
		<div class="circle-right-hidden">
			<div class="circle"></div>
		</div>
	</div>
	<div class="circle-left">
		<div class="circle-left-hidden">
			<div class="circle"></div>
		</div>
	</div>
</div>

CSS

.circle-wrap {
	position: relative;
	width: 50px;
	height: 50px;
}
.circle {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background: #E74C3C;
}

.circle-right {
	position: absolute;
	left: 25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
}
.circle-right-hidden {
	position: relative;
	left: -25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateRight 4s linear infinite;
	animation: rotateRight 4s linear infinite;
}
@-webkit-keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

.circle-left {
	width: 25px;
	height: 50px;
	overflow: hidden;
}
.circle-left-hidden {
	position: relative;
	left: 25px;
	width: 25px;
	height: 50px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateLeft 4s linear infinite;
	animation: rotateLeft 4s linear infinite;
}
.circle-left .circle {
	position: relative;
	left: -25px;
}
@-webkit-keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}

0%～50%までが右半分、50%～100%が左半分がアニメーションするようにしています。
円形に徐々に表示するデモページ
　

画像を円形に徐々に表示する

先ほどはCSSで作った円を徐々に表示しましたが、画像を徐々に表示するようにしてみます。

HTML

<div class="circle-wrap">
	<div class="circle-right">
		<div class="circle-right-hidden">
			<div class="circle">
				<img src="img.jpg" width="320" height="320" alt="" />
			</div>
		</div>
	</div>
	<div class="circle-left">
		<div class="circle-left-hidden">
			<div class="circle">
				<img src="img.jpg" width="320" height="320" alt="" />
			</div>
		</div>
	</div>
</div>

CSS

.circle-wrap {
	position: relative;
	width: 640px;
	height: 640px;
}
.circle {
	position: relative;
	width: 640px;
	height: 640px;
}
.circle img {
	position: relative;
	top: 160px;
}

.circle-right {
	position: absolute;
	left: 320px;
	width: 320px;
	height: 640px;
	overflow: hidden;
}
.circle-right-hidden {
	position: relative;
	left: -320px;
	width: 320px;
	height: 640px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
	-webkit-animation: rotateRight 4s linear infinite;
	animation: rotateRight 4s linear infinite;
}
@-webkit-keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
.circle-right .circle {
	position: relative;
	left: 160px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 25% 50%;
	transform-origin: 25% 50%;
	-webkit-animation: rotateRight2 4s linear infinite;
	animation: rotateRight2 4s linear infinite;
}
@-webkit-keyframes rotateRight2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	100% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
}
@keyframes rotateRight2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	100% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
}

.circle-left {
	width: 320px;
	height: 640px;
	overflow: hidden;
}
.circle-left-hidden {
	position: relative;
	left: 320px;
	width: 320px;
	height: 640px;
	overflow: hidden;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-animation: rotateLeft 4s linear infinite;
	animation: rotateLeft 4s linear infinite;
}
@-webkit-keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
.circle-left .circle {
	position: relative;
	left: -160px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 25% 50%;
	transform-origin: 25% 50%;
	-webkit-animation: rotateLeft2 4s linear infinite;
	animation: rotateLeft2 4s linear infinite;
}
@-webkit-keyframes rotateLeft2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
}
@keyframes rotateLeft2 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
}

実際の画像の大きさよりアニメーションする要素を大きくしています。
.circle-right-hiddenと.circle-left-hiddenが回転すると画像も回転してしまうので、画像を反対方向に回転するようにしています。
画像を円形に徐々に表示するのデモページ
　

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

円形に徐々に表示されるアニメーション

右半分を徐々に表示する

HTML

CSS

左半分を徐々に表示する

HTML

CSS

円形に徐々に表示する

HTML

CSS

画像を円形に徐々に表示する

HTML

CSS

コメントを残すコメントをキャンセル

Category

Tag

Recent

円形に徐々に表示されるアニメーション

右半分を徐々に表示する

HTML

CSS

左半分を徐々に表示する

HTML

CSS

円形に徐々に表示する

HTML

CSS

画像を円形に徐々に表示する

HTML

CSS

関連記事

SVGのアニメーションでイージングを設定する

Lottieで作成されたアニメーションの制御を試してみる

Sassでのイージング設定を試してみる

VanillaJSでslideDownを実装する

横方向に流れ続けるスライドを実装する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル