Как сделать анимацию плавнее?

Question

[an]

Помогите добиться нормального результата
как с цифрами не кручу, что-то не то
слишком большой интервал пропадания текста с заменой
нужно чтобы пропадание было минимальным, но была хорошая плавность смены

Comments

[Flying]

Не очень понятна суть вопроса...
"нормальный результат" - весьма субъективная вещь, чего вы хотите достичь?
"Слишком большой интервал пропадания" - у вас стоит 400 миллисекунд, это 25 кадров.
Ну и обратите внимание на то, что у вас проблема в коде: нельзя работать с анимациями через setTimeout(), ожидая что задержка в этой функции и значение, выставленное для transition совпадут. Это разные подсистемы браузера, они могут совпасть, но совсем не обязаны. Вместо этого стоит использовать событие transitionend, тогда ваши анимации точно не будут прерываться или рваться.

Answer 1

[citizen55]

но была хорошая плавность смены

- это непонятно

.mshow {
  opacity:1;
  transition: opacity 400ms ease-in-out;
}
.mhide {
  opacity:0;
}