css анимация негладкая в разных браузерах

Question

В настоящее время я делаю несколько тестов для значка загрузки, а я # m испытываю странную разницу в гладкости в разных браузерах.

Посмотрите: https://jsfiddle.net/42xbt4bz/6/

Css:

.loader-icon[class*='bullets'] { 
width: 6px; 
height: 6px; 
display: block; 
position: relative; 
margin-left: 20px; 
margin-top: 50px; 
margin-bottom: 10px; 
} 

.loader-icon[class*='bullets'] span { 
content: ""; 
background: #000000; 
width: 6px; 
height: 6px; 
position: absolute; 
top: 0; 
left: 0; 
border-radius: 10px; 
} 
.loader-icon[class*='bullets'] span:nth-of-type(1) { left: 12px; } 
.loader-icon[class*='bullets'] span:nth-of-type(3) { left: -12px; } 

/* bullets fade */ 
.loader-icon.bullets-fade span { 
-webkit-animation: loader-bullets-fade 1.6s infinite ease; 
-moz-animation: loader-bullets-fade 1.6s infinite ease; 
animation: loader-bullets-fade 1.6s infinite ease; 
animation-delay: 0.4s; 
} 
.loader-icon.bullets-fade span:nth-of-type(1) { animation-delay: 0.8s; } 
.loader-icon.bullets-fade span:nth-of-type(3) { animation-delay: 0s; } 
@-webkit-keyframes loader-bullets-fade { 
    0% { opacity: 1; } 
    40% { opacity: 0.3; } 
    80% { opacity: 1; } 
} 
@-moz-keyframes loader-bullets-fade { 
    0% { opacity: 1; } 
    40% { opacity: 0.3; } 
    80% { opacity: 1; } 
} 
@keyframes loader-bullets-fade { 
    0% { opacity: 1; } 
    40% { opacity: 0.3; } 
    80% { opacity: 1; } 
} 

/* bullets jump */ 
.loader-icon.bullets-jump span { 
-webkit-animation: loader-bullets-jump 1.2s infinite ease; 
-moz-animation: loader-bullets-jump 1.2s infinite ease; 
animation: loader-bullets-jump 1.2s infinite ease; 
animation-delay: 0.2s; 
} 
.loader-icon.bullets-jump span:nth-of-type(1) { animation-delay: 0.4s; } 
.loader-icon.bullets-jump span:nth-of-type(3) { animation-delay: 0s; } 
@-webkit-keyframes loader-bullets-jump { 
    0% { top: 0; } 
    40% { top: -4px; } 
    80% { top: 0; } 
} 
@-moz-keyframes loader-bullets-jump { 
    0% { top: 0; } 
    40% { top: -4px; } 
    80% { top: 0; } 
} 
@keyframes loader-bullets-jump { 
    0% { top: 0; } 
    40% { top: -4px; } 
    80% { top: 0; } 
} 

/* bullets pulse */ 
.loader-icon.bullets-pulse span { 
-webkit-animation: loader-bullets-pulse 1.2s infinite ease; 
-moz-animation: loader-bullets-pulse 1.2s infinite ease; 
animation: loader-bullets-pulse 1.2s infinite ease; 
animation-delay: 0.2s; 
} 
.loader-icon.bullets-pulse span:nth-of-type(1) { animation-delay: 0.4s; } 
.loader-icon.bullets-pulse span:nth-of-type(3) { animation-delay: 0s; } 

@-webkit-keyframes loader-bullets-pulse { 
    0% { -webkit-transform: scale(1); transform: scale(1); } 
    40% { -webkit-transform: scale(1.1); transform: scale(1.3); } 
    80% { -webkit-transform: scale(1); transform: scale(1); } 
} 
@-moz-keyframes loader-bullets-pulse { 
    0% { -webkit-transform: scale(1); transform: scale(1); } 
    40% { -webkit-transform: scale(1.1); transform: scale(1.3); } 
    80% { -webkit-transform: scale(1); transform: scale(1); } 
} 
@keyframes loader-bullets-pulse { 
    0% { -webkit-transform: scale(1); transform: scale(1); } 
    40% { -webkit-transform: scale(1.1); transform: scale(1.3); } 
    80% { -webkit-transform: scale(1); transform: scale(1); } 
} 

Это очень странно для меня, и я понятия не имею, как я могу оптимизировать эти анимации. Упование вы можете мне помочь

Answer 1

Я не думаю, что здесь очень много странных. То, что вы видите, - это естественная разница в том, как браузеры делают вещи. Не забывайте, что большинство из них используют свои собственные, разные механизмы рендеринга.

Теперь масштабная анимация в FF в частности выглядит плохо. Тем не менее, для всех этих, если вы увеличите размер анимации, он станет более плавным. То есть по нескольким причинам:

1. Прежде всего, когда вы перемещаете что-то всего на пару пикселей на стандартном, но несколько невысоком дисплее по современным стандартам, это будет выглядеть плохо. Просто потому, что вы буквально перемещаете объект 1px за полсекунды или около того. Увеличьте это до 30px, и вы заметите, насколько он выглядит более гладко. Это особенно поддерживается вашим примером # 1. Поскольку точки неподвижны, но непрозрачность обеспечивает много ключевых кадров, эта анимация выглядит лучше всего во всех браузерах.
2. Анимации, которые не выгружены в gpu, будут иметь более низкую частоту кадров. Кроме того, если вы сделаете анимацию очень медленной и вытащили, конечный результат будет выглядеть еще хуже.

Но, прежде всего, это загрузка анимаций. Надеюсь, пользователю никогда не придется смотреть на них достаточно долго, чтобы заметить несоответствия.