如何创建惊人的微调器

Question

我正在尝试创建一个像this（右图）这样的微调器。

我从字面上复制了代码，但是结果是如此不同（形状，速度，流畅性...）

显然，出了点问题。有帮助吗？

@keyframes rotation {
			0% {
				transform: rotate(0);
			}
			100% {
				transform: rotate(360deg);
			}
		}

		@-webkit-keyframes rotation {
			0% {
				-webkit-transform: rotate(0);
			}
			100% {
				-webkit-transform: rotate(360deg);
			}
		}

		@-moz-keyframes rotation {
			0% {
				-moz-transform: rotate(0);
			}
			100% {
				-moz-transform: rotate(360deg);
			}
		}

.spinner{
	position:fixed;
	left:calc(50% - 15px);
	top:63px;
}

.fa-spinner{
			font-size: 5em;
			animation: rotation 2s infinite steps(8);
			-webkit-animation: rotation 2s infinite steps(8);
			-moz-animation: rotation 2s infinite steps(8);
		}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<i class="fa fa-spinner spinner"></i>

Answer 1

您引用的示例使用fontAwesome4，而您的实现使用FA5。恐怕我无法完全解释为什么这解释了差异（以及为什么决定采用不同的方式），但是我认为动画中好的尺寸更改只能使用V4来实现，

FontAwesome 4.7 ：

@keyframes rotation {
			0% {
				transform: rotate(0);
			}
			100% {
				transform: rotate(360deg);
			}
		}

		@-webkit-keyframes rotation {
			0% {
				-webkit-transform: rotate(0);
			}
			100% {
				-webkit-transform: rotate(360deg);
			}
		}

		@-moz-keyframes rotation {
			0% {
				-moz-transform: rotate(0);
			}
			100% {
				-moz-transform: rotate(360deg);
			}
		}

.spinner{
	position:fixed;
	left:calc(50% - 15px);
	top:63px;
}

.fa-spinner{
			font-size: 5em;
			animation: rotation 2s infinite steps(8);
			-webkit-animation: rotation 2s infinite steps(8);
			-moz-animation: rotation 2s infinite steps(8);
		}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-spinner fa-3x"></i>

FontAwesome 5.3.1 ：

@keyframes rotation {
			0% {
				transform: rotate(0);
			}
			100% {
				transform: rotate(360deg);
			}
		}

		@-webkit-keyframes rotation {
			0% {
				-webkit-transform: rotate(0);
			}
			100% {
				-webkit-transform: rotate(360deg);
			}
		}

		@-moz-keyframes rotation {
			0% {
				-moz-transform: rotate(0);
			}
			100% {
				-moz-transform: rotate(360deg);
			}
		}

.spinner{
	position:fixed;
	left:calc(50% - 15px);
	top:63px;
}

.fa-spinner{
			font-size: 5em;
			animation: rotation 2s infinite steps(8);
			-webkit-animation: rotation 2s infinite steps(8);
			-moz-animation: rotation 2s infinite steps(8);
		}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<i class="fas fa-spinner fa-3x"></i>  <!-- NB: "fas", not "fa" -->