为什么在我的页面模糊之后我失去了我的照片质量？

Question

我正在创建一个混合应用程序，我有一个带有一些图片的页面，并且总是在添加这个动画之后：

.blur { 
    animation-name: bluring!important;
    animation-duration: 0.5s;
    }

@keyframes bluring {
    0% {filter: blur(0px);}
    100% {filter: blur(27px);}
    }

使用jquery：

$('#my_pic, #another_pic').addClass('animated blur');

有一个可以将其转回的按钮

$( '#my_button' ).click(function() {
$('#my_pic, #another_pic').removeClass('animated blur');
$('#my_pic, #another_pic').addClass('animated unblur');   
});

顺便说一句

.unblur {
    animation-name: unbluring;
    animation-duration: 0.5s;
}

@keyframes unbluring {
    0% {filter: blur(27px);}
    100% {filter: blur(0px);}
}

我的照片质量下降。为什么？这发生在我的手机上（android）。在我的平板电脑（机器人）整个页面模糊放大背景。但是在我的平板电脑上我不会失去质量。有人可以帮忙吗？

在：

在：