使用 CSS 的动画比例 - 具有多个背景

Question

几天来我一直在尝试使用 CSS3 模拟视频编辑效果，但没有成功。我有两张背景图片（一张在另一张上面），我想创建一个动画，在其中放大或缩放顶部的图片，同时保持背景图片不变。

我已经能够在保持背景完好无损的情况下成功地更改顶部图像的位置，而且我还可以制作同时缩放前景和背景图像的动画。

这里有一些代码可以使这一切更加清晰：

我的HTML：

<section id="about-photo" class = "light-bg img-bg" style = "background-image: url({% static "assets/images/art/cocuy-foreground.png" %}), url({% static "assets/images/art/cocuy-background.jpg" %});"> 

    <div class="container inner">
        <div class="row">
        </div><!-- /.row -->
    </div><!-- /.container -->

</section>

我的 CSS（为简洁起见，仅包括 webkit）

@-webkit-keyframes hide {

  from { background-position: 0px 0px, 0px 0px; }   
  to { background-position: 0px 300px, 0px 0px; } 

}


@-webkit-keyframes zoom {    

    from {-webkit-transform: scale(1,1), scale(1,1) ;}  
    to {-webkit-transform: scale(2,2), scale(1,1) ;}

}



#about-photo { 

    background-repeat: no-repeat; 
    -webkit-animation-name: zoom;   
    -webkit-animation-duration: 4s;   
    -webkit-animation-delay: 1s;  
    -webkit-animation-iteration-count: 1;   
    -webkit-animation-timing-function: linear;   

}

当我应用名为 "hide" 的动画时一切正常，但当我使用 "zoom" 时没有任何反应。

任何 ideas/tips 将不胜感激！丹尼斯

Answer 1

不确定您是否真的需要为此使用关键帧。您可以简单地使用 transition 和 transform 来实现这一点。我制作了一个 jsFiddle 来展示如何做到这一点。另请注意，您希望包含其他供应商前缀，以便您的代码适用于所有浏览器。

#about-photo {
  position: relative;
}
.light-bg {
  width: 1000px;
  height: 1000px;
  background: url('http://www.broomehovercraft.com.au/graphics/bht/popups/gallery-sunset-6.jpg');
  background-repeat: no-repeat;
}
.smiley {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 100px;
  height: 100px;
  z-index: 2;
  background: url('http://www.wpclipart.com/smiley/assorted_smiley/assorted_3/smiley_a_bit_angry_T.png');
  background-size: 100px 100px;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}
.smiley:hover {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

<section id="about-photo" class="light-bg img-bg">

  <div class="smiley"></div>
  <!-- /.container -->

</section>

http://jsfiddle.net/augburto/44sbrooy/

要注意的主要事情是，在您希望有一个 "zoom effect" 的元素上，您想要应用一个过渡，以便它知道当对其应用变换时，它会顺利地进行（如果你没有这个，那么它会立即执行操作。

现在我有了它，所以当您将鼠标悬停在笑脸上方时，它会 scale 进行变换。但是，您可以轻松地将其更改为可以应用的 class。只要你的元素有过渡，它就会产生很好的 "zoom-in" 效果。然后可以将图像的实际缩放应用到单独的 class，您可以随时应用它。

有关 transitions, check out MDN 的更多文档。

如果您真的想使用关键帧，请更新您的问题，但在我看来，在这种情况下没有必要。

使用 CSS 的动画比例 - 具有多个背景

Animating scale using CSS - with multiple backgrounds

css

css-animations