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;   

}

当我应用名为＆＃34的动画时，隐藏＆＃34;事情很好，但是当我使用＆＃34; zoom＆＃34;什么都没发生。

任何想法/提示将不胜感激！丹尼斯

Answer 1

不确定您是否确实需要使用关键帧。您只需使用transition和transform即可实现此目的。我做了一个jsFiddle，展示你如何做到这一点。另请注意，您希望包含其他供应商前缀，以便您的代码可以在所有浏览器中使用。

＆＃13;

#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);
}

＆＃13;

<section id="about-photo" class="light-bg img-bg">

  <div class="smiley"></div>
  <!-- /.container -->

</section>

＆＃13;

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

要注意的主要事项是，在你希望有一个＆＃34;缩放效果＆＃34;的元素上，你想要应用一个转换，这样它就知道当一个转换被应用到它时，它会做到顺利（如果你没有这个，那么它会立即采取行动。

现在我拥有它当你将鼠标悬停在笑脸上时，它会scale进行转换。但是，您可以轻松地将其更改为可以应用的类。只要你的元素有一个过渡，它就会创造出漂亮的＆＃34;放大＆＃34;影响。然后，图像的实际缩放可以应用于您可以随时应用的单独类。

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

如果你真的想使用关键帧，那么请更新你的问题，但在我看来，在这种情况下它是不必要的。

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

1 个答案: