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

2016.02.01

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

右半分を徐々に表示する

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

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が回転すると画像も回転してしまうので、画像を反対方向に回転するようにしています。
画像を円形に徐々に表示するのデモページ
　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年11月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
30