动画背景适配屏幕

Question

我在闪屏上有一个背景图像，它慢慢地从100%放大到200% (没有其他原因，只是为了给页面一点生命)。它在水平屏幕上工作得很好，因为它是一个水平图像，但当屏幕很窄时(对于移动设备)，由于图像不再填充背景，因此会出现上下空白。如果我将背景尺寸改为‘封面’，那么动画就不能正常工作(它从0%开始放大，而不是填满整个屏幕)。

所以我的问题是-如何设置覆盖的初始大小，使其始终充满屏幕，然后将其缓慢放大到200%？

​

$('.background').animate({
    backgroundSize: "200%"
	}, 40000);

body {
	margin: 0;
	padding: 0;
}

.background {
	width: 100%;
	height: 100vh;
	background-image:url(Front-Cover.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
	
.header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
	
.header img {
	width: 100%;
	height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
	<img src="header.png" alt="">
</div>

<div class="background"></div>

​

Answer 1

我不能让你的片段工作。尝试一下这个css，不需要jquery。

.background {
        width:100%;
        height:100%;
        background-image:url(Front-Cover.jpg);
        background-position: center;
        background-size: cover;
        animation: 5s ease example infinite;
}

@keyframes example {
    0%   {  transform: scale(1);}
    50% {  transform: scale(2);}
    0%   {  transform: scale(1);}
}

@keyframes example {
    0%   {  -webkit-transition: scale(1);}
    50% {  -webkit-transition: scale(2);}
    0%   {  -webkit-transition: scale(1);}
}
    @keyframes example {
    0%   {  -moz-transition: scale(1);}
    50% {  -moz-transition: scale(2);}
    0%   {  -moz-transition: scale(1);}
}