css3のみで円を線でアニメーションを使用して描きたい

Question

css3のアニメーションを使用して、
正円を線で描く処理を作成したいです。

どうしてもteratailのアンサー様の力が必要になりました。
出来ればソースコードによる回答して頂きますと分かりやすくてありがたいです。
どなたかよろしくお願いします。

Answer 1

対応内容

上記のデモでは途中でチェックが描かれてますが、そういった処理は不要で、

デモの、「チェックを描く部分」を無くし、「1周なぞっている」ように見せました。

一周ぐるっとなぞって、なぞった色のまま終了で描きたいです。

こちらは失念してました。
よって「なぞったままの色で終了」については実現できていません。

各要素の動きの説明

1）.icon

濃色の線の円です。

2）.placeholder

.iconの上に、同じサイズの円を配置します。
線の色は薄い色にし、かぶせてます。

3）.icon:after と .icon:before

.iconの上に白色の要素（afterとbefore）を配置し .icon 隠します。（下記スクショは分かりやすく赤と青にしています。）

これの.icon:after と .icon:beforeをタイミングをずらし、順次移動（回転）させ、.icon の濃色の線を部分的に見せ、一周なぞっているように見せます。

（文章にすると分かりにくいですが。）
（下記コードを、アニメーションの速度を落として、ローカルで試して頂ければと。）

コード

<div class="wrapper">
	<div class="icon animate">
		<div class="placeholder"></div>
	</div>
</div>

/* 初期設定 */
* {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
}
h1 {
	margin-bottom: 50px;
	font-size: 15px;
}
/* ベースの円の部分の初期設定 */
.icon {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border: 4px solid #ad8;
	border-radius: 50%;
}
/* .iconの上に重ねる部分 */
.icon .placeholder {
	position: absolute;
	top: -4px;           /* borderの太さ分、中心を揃えて、.iconの円に重ねる */
	left: -4px;          /* borderの太さ分、中心を揃えて、.iconの円に重ねる */
	width: 80px;
	height: 80px;
	border: 4px solid rgba(165,220,134, .2);
	border-radius: 50%;
	z-index: 2;
}
/* 
 * 要素を追加、設定する 
 *  -> .iconの上に重ねる
 *  -> 要素カラーに透過を設定し、.iconを薄く見せる
 *  -> animationで動かす
 *  -> 隙間から.iconの円の線を見せる -> これが光るように見える
*/
.icon:after,
.icon:before {
	content: '';
	position: absolute;
	width: 60px;
	height: 88px;
	background: #fff;
}
.icon:before {
	top: -4px;                          /* borderの太さ分調整する */
	left: 50%;
	transform-origin: left 44px;        /* height/2 を起点にする */
}
.icon::after {
	top: -4px;                          /* borderの太さ分調整する */
	right: 50%;
	transform-origin: right 44px;       /* height/2 を起点にする */
}

/* キーフレームアニメーションの設定 */
@keyframes rotatePlaceholderBfore {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(180deg);
		opacity: 1;
	}
	51% {
		opacity: 0;
	}
}
@keyframes rotatePlaceholderAfter {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(0);          /* animate::before が半回転してから回転開始させる */
	}
	100% {
		transform: rotate(180deg);
	}
}

/* キーフレームアニメーションを適用 */
.icon.animate::before {
	animation: rotatePlaceholderBfore .5s ease-in;
}
.icon.animate::after {
	animation: rotatePlaceholderAfter .5s ease-out;
}

以上になります。
どうぞよろしくお願い致します。

Comments

[sanset]

非常に丁寧なコードと解説まで付けてくださり、ありがとうございます。
残りはこちらで頑張ってみようと思います。

Answer 2

ざっと見たところ、HTMLの下記がチェック部分なのでそれを削除すれば、チェックは表示されなくなります。

		<span class="line tip animateSuccessTip"></span>
		<span class="line long animateSuccessLong"></span>

後は、cssの該当のセレクタ部分を削除すればいいでしょう。

Comments

[sanset]

ありがとうございます。
チェックを消すのは仰る通りですが、回転部分の詳細が不明でした。