Background-size transition not work in Chrome

谁说胖子不能爱 提交于 2020-02-06 03:41:30

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!