CSS background-image свойство элемента DOM не имеет встроенных средств для анимации.
Псевдоэлемент CSS можно анимировать.Вы можете использовать :after псевдоэлемент CSS с width, установленным на calc(100vw) и height, установленным на calc(100vh), для покрытия области просмотра, и набором свойств animation, где соответствующие keyframes анимируют псевдоэлемент content значение свойства от opacity 0 до opacity 1.Если backgroundImage не является null, добавьте текст CSS к элементу <style>, который устанавливает свойство content псевдоэлемента body :after с content, установленным на функцию CSS url(), для извлеченной data URLот localStorage.
<!DOCTYPE html>
<html>
<head>
<style>
body:after {
position: relative; /* set `position` to `relative`
content: unset; /* set `content` to `unset` */
width: calc(100vw); /* width of viewport */
height: calc(100vh); /* height of viewport */
animation: bg 5s ease forwards; /* `iteration-timing-function` set to `forwards` */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
// set `body:after` `content` to `data URL`: `backgroundImage`
$("style").append(`body:after{content:url(${backgroundImage})} @keyframes bg {from {opacity:0}to {opacity:1)}}`);
}
}
function loadImageFile(testEl) {
if (!testEl.files.length) {
return;
}
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) {
alert("You must select a valid image file!");
return;
}
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body>
<input id="test" type="file" onchange="loadImageFile(this)" />
</body>
</html>
плнкр http://plnkr.co/edit/b29hbGi6meodd2LTEgFL?p=preview