как создать потрясающий прядильщик - PullRequest
Новая
       6

как создать потрясающий прядильщик

0 голосов
/ 20 октября 2018

Я пытаюсь создать спиннер типа 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>

1 Ответ

0 голосов
/ 20 октября 2018

В приведенном вами примере используется 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" -->
...