Блог

Главная - Вопросы по программированию - Плавно анимировать эффект биения до нормального масштаба

Плавно анимировать эффект биения до нормального масштаба

#javascript #html #css

#javascript #HTML #css — код

Вопрос:

У нас есть простой эффект биения с использованием ключевых кадров CSS, и он работает с Start и Stop функционирует:

 function Start() {
    const original = document.getElementById('original');
    original.classList.add("beaton-short");
}


function Stop() {
    const original = document.getElementById('original');
    original.classList.remove("beaton-short");
    original.classList.add("beatoff");
}


setTimeout(() => {
        Start();
        setTimeout(() => Stop(), 5000);
},3500); 
 #original {
  position: relative;
  display:inline-block;
  transition: opacity 1s ease-in-out;
  font-size: 3vw;
}

.beaton-short {
    -webkit-animation: beaton-short 1.5s ease-in-out infinite both;
            animation: beaton-short 1.5s ease-in-out infinite both;
}

@keyframes beaton-short {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.beatoff {
 /* animation-iteration-count: 1;*/
  animation: beatoff 0.2s ease-out;
  animation-fill-mode: forwards ;
}

@keyframes beatoff {
  100% { transform: scale(1) }
} 
 <div class="label-container">
        <span id="original"> This text should stop beating smoothly not with a jerking movment </span>
</div>

Как вы видите, в некоторых случаях, когда мы вызываем Stop , биение анимации останавливается с резким движением к его первоначальному масштабу.

Есть ли какое-нибудь решение, чтобы плавно анимировать биение обратно в нормальное состояние без прыжков?

Комментарии:

1. cubic-bezier developer.mozilla.org/en-US/docs/Web/CSS/…

2. cubic-bezier.com/#.17 ,.67,.83,.67

3. речь идет не об ослаблении … пожалуйста, посмотрите на движение прыжка при остановке…