动画背景大小:缩放到背景大小:110%

Question

我期待CSS动画背景从大小background-size: cover;到background-size: 120%悬停.我不能让背景以100%开始,因为它开始在不同的设备/监视器上垂直重复.但是,transition:.5s;在这种情况下,停止任何类型的动画.有什么解决方法吗？

代码如下所示:

HTML

<div class="desktop-signs">
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-illustration">
      <h2>ILLUSTRATION &amp; ANIMATION</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-website">
      <h2>WEBSITE DEVELOPMENT</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-game">
      <h2>GAME &amp; APP DEVELOPMENT</h2>
    </div>
  </div>
</div>

CSS

.__hero-container #services .block-service {
  height: 800px;
  background-image: url('../images/blockillustration.jpg');
  background-size: cover;
  text-align: center;
  color: #fff;
  background-position: center;
  opacity: 1;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.__hero-container #services .block-service:hover {
  background-size: 110%;
  opacity: 0.8;
  cursor: pointer;
}

Answer 1

你已经意识到你不能动画cover到任何其他值.

您可以使用缩放的伪元素伪造效果:

.block-service {
  height: 800px;
  color: #fff;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.block-service:before {
  content: "";
  background-image: url('http://placehold.it/400x400');
  background-size: cover;
  background-position: center;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: all .5s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.block-service:hover:before {
  transform: scale(1.2);
  opacity: 0.8;
  cursor: pointer;
}

<div class="desktop-signs">
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-illustration">
      <h2>ILLUSTRATION &amp; ANIMATION</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-website">
      <h2>WEBSITE DEVELOPMENT</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-game">
      <h2>GAME &amp; APP DEVELOPMENT</h2>
    </div>
  </div>
</div>