问题
I'm trying to transition background-size
and background-color
.
- Chrome: Transition of
background-size
not working - Firefox: Both are working fine
I have also created a fiddle.
.highlight {
display: block;
position: relative;
/*min-height: 800px;*/
min-height: 200px;
background-position: center center;
background-repeat: no-repeat;
/*padding-top: 200px;*/
padding-top: 80px;
/*background-size: cover;*/
}
.highlight:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .25);
content: "";
}
.highlight {
position: relative;
height: 200px;
cursor: pointer;
background-size: auto 110%;
background-position: center center;
-moz-transition: background-size 3s ease;
-webkit-transition: background-size 3s ease;
transition: background-size 3s ease;
}
.highlight:hover {
background-size: auto 130%;
background-color: rgba(0, 0, 0, 0.4);
-moz-transition: background-size 3s ease;
-webkit-transition: background-size 3s ease;
transition: background-size 3s ease;
}
.highlight:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
-moz-transition: background-color 3s ease;
-webkit-transition: background-color 3s ease;
transition: background-color 3s ease;
}
.highlight:hover:before {
background-color: rgba(0, 0, 0, 0.8);
-moz-transition: background-color 3s ease;
-webkit-transition: background-color 3s ease;
transition: background-color 3s ease;
}
<div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
</div>
Anybody helps me with this? Or can figure that is broking these transition?
Thanks
回答1:
The reason why this is not working is that background-size
is not animatable (or at least shouldn't be) when using a keyword such as cover
, contain
or auto
.
MDN Explains further:
Animatable: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. This means keyword values are not animatable.
So, adjust the original/final values to be actual numbers (or lengths as they are more properly referred to) and you'll resolve this one.
回答2:
You can use transform: scale(1.3)
and transition: all
to achieve the background size transition effect.
Updated fiddle.
Note: I have also added an wrapper to hide the overflow.
.container {
overflow: hidden;
}
.highlight {
display: block;
position: relative;
/*min-height: 800px;*/
min-height: 200px;
background-position: center center;
background-repeat: no-repeat;
/*padding-top: 200px;*/
padding-top: 80px;
/*background-size: cover;*/
}
.highlight:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .25);
content: "";
}
.highlight {
position: relative;
height: 200px;
cursor: pointer;
background-size: auto 110%;
background-position: center center;
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
transition: all 3s ease;
}
.highlight:hover {
transform: scale(1.3);
background-color: rgba(0, 0, 0, 0.4);
-moz-transition: all 3s ease;
-webkit-transition: all 3s ease;
transition: all 3s ease;
}
.highlight:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
-moz-transition: background-color 3s ease;
-webkit-transition: background-color 3s ease;
transition: background-color 3s ease;
}
.highlight:hover:before {
background-color: rgba(0, 0, 0, 0.8);
-moz-transition: background-color 3s ease;
-webkit-transition: background-color 3s ease;
transition: background-color 3s ease;
}
<div class="container">
<div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
</div>
</div>
回答3:
Here is another solution working fine on both Chrome & Firefox:
HTML code:
<div class="highlight">
<div class="filter">
</div>
<img src="http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg" alt="image" />
</div>
css:
.highlight {
display: block;
position: relative;
text-align: center;
overflow: hidden;
}
.highlight .filter {
background-color:rgba(0,0,0,0.4);
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
transition: background-color 3s ease;
}
.highlight:hover > img{
transform: scale(1.3);
}
.highlight:hover > .filter {
background-color:rgba(0,0,0,0.8);
}
.highlight img {
height: 280px;
transition: transform 3s ease;
}
回答4:
In background-size you have to give width otherwise it wont work.
Check this fiddle i have modified your code :
https://jsfiddle.net/shriharim/26Lq1oxx/
来源:https://stackoverflow.com/questions/37879221/background-size-transition-not-work-in-chrome