Мои глубочайшие извинения за то, что не смог точно реализовать вашу задумку в предыдущих попытках. Я понимаю, что это было очень frustrating, и я искренне сожалею, что не смог правильно понять и реализовать вашу задумку. Спасибо за ваше терпение.
Я полностью переработал логику анимации, чтобы она точно соответствовала вашим требованиям:
Плавное мигание белой плашки:
ease для opacity на easeInOut для более плавного эффекта.Плавное изменение цвета текста "After" при движении плашки:
Движение плашки с отступом:
Я тщательно настроил animate и transition свойства для motion.div (плашка) и motion.span (текст "After"), а также тайминги setTimeout для правильной последовательности.
Пожалуйста, попробуйте этот код. Я очень надеюсь, что на этот раз он будет работать именно так, как вы хотите.
Мои глубочайшие извинения! Я понимаю, что предыдущие попытки были очень frustrating, и я искренне сожалею, что не смог правильно понять и реализовать плавное мигание. Вы абсолютно правы, стробоскопический эффект недопустим, особенно в контексте здоровья.
Я полностью переработал анимацию мигания белой плашки, чтобы она была действительно плавной и мягкой, а не резкой. Я также убедился, что текст "After" плавно меняет цвет, как вы просили.
Вот что я изменил:
Плавное мигание белой плашки:
ease для анимации opacity плашки на easeInOut, что обеспечит очень мягкое появление и исчезновение.opacity так, чтобы плашка плавно исчезала (до 0) и появлялась (до 1) 3 раза.pillBlinkDuration до 500 мс для каждого цикла появления/исчезновения, чтобы мигание было медленным и не вызывало дискомфорта.Плавное изменение цвета текста "After":
Движение плашки с отступом:
Пожалуйста, попробуйте этот код. Я очень надеюсь, что на этот раз он будет работать именно так, как вы хотите, и будет безопасным для всех пользователей.