CSS动画，职位

Question

即时通讯试图为我的网站上的图像应用“震撼”动画。问题是，脚本扩展了宽度，所以我可以看到我的浏览器的底部栏：

HTML：

<div class="wrapper"> 
     <article class="top-logo"> 
      <h1> 
       <a href="#" target="_blank"><img src="img/logo.png" alt="robbie-logo"></a> 
      </h1> 
     </article> 

CSS：

.top-logo { 
    position: relative; 
    float: right; 
} 
.top-logo img { 
    height: 150px; 
    width: 350px; 
    -webkit-transform-style: preserve-3d; 
} 

.top-logo:hover { 
    animation-name: diagonal-slide; 
    animation-duration: 0.05s; 
    animation-iteration-count: 10; 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes diagonal-slide { 
    from { top: 0; left: 0; animation-timing-function: linear; } 
    20% { top: -5px; left: -5px; animation-timing-function: linear; } 
    40% { top: 5px; left: -5px; animation-timing-function: linear; } 
    60% { top: 5px; left: 5px; animation-timing-function: linear; } 
    80% { top: -5px; left: 5px; animation-timing-function: linear; } 
    to { top: 0; left: 0; animation-timing-function: linear; } 
} 

Answer 1

它不会发生在这里（没有滚动条），但仍然，尽量把它添加到容器：

.wrapper { 
    overflow: hidden; 
} 

.wrapper { 
 
    overflow: hidden; 
 
} 
 

 
.top-logo { 
 
    position: relative; 
 
    float: right; 
 
} 
 

 
.top-logo img { 
 
    height: 150px; 
 
    width: 350px; 
 
    -webkit-transform-style: preserve-3d; 
 
} 
 

 
.top-logo:hover { 
 
    animation-name: diagonal-slide; 
 
    animation-duration: 0.05s; 
 
    animation-iteration-count: 10; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@-webkit-keyframes diagonal-slide { 
 
    from { 
 
    top: 0; 
 
    left: 0; 
 
    animation-timing-function: linear; 
 
    } 
 
    20% { 
 
    top: -5px; 
 
    left: -5px; 
 
    animation-timing-function: linear; 
 
    } 
 
    40% { 
 
    top: 5px; 
 
    left: -5px; 
 
    animation-timing-function: linear; 
 
    } 
 
    60% { 
 
    top: 5px; 
 
    left: 5px; 
 
    animation-timing-function: linear; 
 
    } 
 
    80% { 
 
    top: -5px; 
 
    left: 5px; 
 
    animation-timing-function: linear; 
 
    } 
 
    to { 
 
    top: 0; 
 
    left: 0; 
 
    animation-timing-function: linear; 
 
    } 
 
}

<div class="wrapper"> 
 
    <article class="top-logo"> 
 
    <h1> 
 
     <a href="#" target="_blank"><img src="http://placehold.it/100x60/fa0" alt="robbie-logo"></a> 
 
    </h1> 
 
    </article> 
 
</div>