Blur не работает при анимации с использованием translate из-за особенностей работы графического ускорения, которое применяется браузерами для оптимизации производительности.
Когда вы используете свойство translate, браузер применяет аппаратное ускорение, чтобы анимация была плавной и быстрой. Это означает, что с помощью графического процессора вашего компьютера (GPU) происходит отрисовка анимации.
Однако, свойство blur зависит от сжатия растра, которое происходит после отрисовки. Когда браузер применяет аппаратное ускорение к элементу с эффектом размытия, он сначала отрисовывает элемент вне аппаратного контекста. Затем этот отрисованный кадр переносится на графический процессор для ускоренной отрисовки. Однако, после этого процесса сжатия размытого изображения применяется только к исходному кадру, а не к преобразованной анимации. Это приводит к тому, что размытие не работает при анимации с помощью свойства translate.
Есть несколько способов обойти эту проблему. Один из них - использовать фильтр blur на дочернем элементе внутри элемента с анимацией. Например, вместо применения размытия к элементу, вам нужно применить его к вложенному элементу. Это будет работать, потому что дочерний элемент не будет анимироваться с помощью translate и размытие будет применяться корректно.
Еще один способ - использовать SVG-фильтры, которые позволяют более гибко управлять эффектами размытия и применять их к любым элементам анимации.
В целом, проблема с размытием в анимации с использованием translate связана с ограничениями производительности и оптимизации браузера. Чтобы реализовать размытие в таких ситуациях, нужно применять альтернативные методы, такие как фильтры на дочерних элементах или использование SVG-фильтров.