Оживление CSS блокируется в течение выполнения языка сценариев JavaScript

Я разрабатываю страницу груза, который он появится пока контент страницы в себе обработан. Это простой текст, который моргает, пока круги mueven левой стороны в правую сторону.

Проблема состоит в том, что в течение моментов, в которых язык сценариев JavaScript обработан интенсивной формы, блокируется оживление и остается замороженной. Приятель комментировал мне, что это могла бы быть проблема, изменив положение и размер элементов с CSS (потому что мигание да, кажется, функционирует без проблем).

Как я могу предотвращать это поведение? Что могло бы делать для того, чтобы оживление продолжило быть жидким вместо того, чтобы идти скачками?

Это код с принудительным грузом для того, чтобы был виден сбой:

// código para crear bloqueo al generar alta intensidad de JS
setInterval(function() {
  for (let j = 0; j < 10000; j++) {
    let o = new Array(20000);
  }
}, 1500);
@keyframes csLoadingBlink {
  0%, 80% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes csLoadingMoveButton {
  0% {
    top: 0;
    width: 2rem;
    height: 2rem;
    left: 0;
  }
  100% {
    top: 1rem;
    width: 0rem;
    height: 0rem;
    left: 100%;
  }
}


.cs-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cs-brand {
  white-space: nowrap;
  animation: csLoadingBlink 3s linear infinite;
}

.cs-brand span {
  white-space: nowrap;
  display: inline-block;
  color: #000369;
  vertical-align: middle;
}

.cs-name {
  border-right: 1px solid;
  padding-right: 1rem;
  margin-right: 1rem;
  font-size: 2.5rem;
  line-height: 3rem;
}

.cs-name sup {
  font-size: 0.75rem;
}

.cs-slogan {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.cs-animation {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  position: relative;
}

.cs-animation span,
.cs-animation::before {
  display: block;
  content: "";
  position: absolute;
  line-height: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000369;
}


.cs-animation span {
  animation: csLoadingMoveButton 3s linear infinite;
  animation-fill-mode: backwards;
}

.cs-animation span:nth-of-type(1) {
  animation-delay: 0s;
}

.cs-animation span:nth-of-type(2) {
  animation-delay: 1s;
}

.cs-animation span:nth-of-type(3) {
  animation-delay: 2s;
}
<div class="cs-loading">
  <div class="cs-brand">
    <span class="cs-name">Compa&ntilde;&iacute;a</span>
    <span>Mejor Slogan del Mundo</span>
  </div>
  <div class="cs-animation">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
10
задан 03.07.2019, 00:17
0 ответов