图像上的人造作物的CSS过渡

Question

我正在处理标题放置在导航栏上方的标题。当用户开始向下滚动页面时，标题会随着CSS过渡而收缩，徽标会被“裁剪”，并且它的位置会被移动以适应缩小的标题。这工作得很好。但是，我试图找到一种方法来为徽标上的“裁剪”制作动画。我目前正在获得的是动画标志的重新定位。

这里有一个小提琴：https://jsfiddle.net/3ehg1hLf/

是否有可能把上的标识类，将动画它的减少，而不是它的位置的转变？

我的HTML如下：

<div class="container-fluid no-pad"> 
<div class="navbar navbar-fixed-top"> 
    <div class="row xyz"> 

     <div class="col-xs-4"> 
      <span class="logo"><img src="http://i.imgur.com/5MchhVA.png?1" /></span> 
     </div> 

    </div> 
</div> 

CSS：

body { 
    margin: 0; 
    border: 0; 
} 

.no-pad { 
    padding: 0; 
} 


.xyz { 
    max-width: 1280px; 
    height: 91px; 
    background: blue; 
    color: #fff; 
    margin: 0 auto; 
    text-align: center; 
    overflow: hidden; 
    /* For Scroll Transition */ 
    -webkit-transition: all .4s ease-out; 
    -moz-transition: all .4s ease-out; 
    -o-transition: all .4s ease-out; 
    transition: all .4s ease-out; 
} 

.col-xs-4 { 
    padding-top: 3px; 
} 

.cropxyz { 
      height: 50px; 
     } 

    .logo { 
      width: 100%; 
     } 

     .crop360 { 
      display: inline-block; 
      width:129px; 
      height:36px; 
      overflow:hidden; 
      margin-top: 8px; 
      /* For Scroll Transition*/ 
      -webkit-transition: all .4s ease-in; 
      -moz-transition: all .4s ease-in; 
      -o-transition: all .4s ease-in; 
      transition: all .4s ease-in; 
     } 

     .crop360 img { 
      position:relative; 
      /*width: 100%;*/ 
      top: 40%; 
      transform: translateY(-50%); 

     } 

Answer 1

我这样做的：使用具有background-image而不是img元素标志元素

• 在“较小”模式下，降低元素
• background-position:center确保它的顶部和裁剪

例如底部： https://jsfiddle.net/scnfbzek/