アニメーションプロパティを追加した後、要素の位置は、ここでは

Question

HTMLを変更している。

<div class="wrapper"> 
    <div class="btn_img"> 
    <a href="#"><img src="path/to/img" alt=""></a> 
    </div> 
</div> 

CSS：

.wrapper .btn_img { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, 50%); 
    animation-name: btnP1lay; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-out; 
    animation-fill-mode: forwards; 
} 

@keyframes btnPlay { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
} 

私は.btn_img要素からアニメーションを削除した場合、それは私がアニメーションで必要なことを、位置センターを取得。 アニメーションでは位置が変わります。

Answer 1

transform: translate(-50%, 50%);を使ってイメージを中央に配置しています。今度は、transform: scale(1);をアニメーションに使用すると、translateのトランスフォームが削除され、その結果、画像がずれることになります。あなたのアニメーション状態でtranslateを維持するだけでなく、以下に挙げる必要があります。

.wrapper .btn_img { 
 
    top: 50%; 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    animation-name: btnPlay; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-out; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes btnPlay { 
 
    0% { transform: translate(-50%, -50%) scale(1); } 
 
    50% { transform: translate(-50%, -50%) scale(1.05);} 
 
    100% { transform: translate(-50%, -50%) scale(1); } 
 
}

<div class="wrapper"> 
 
    <div class="btn_img"> 
 
    <a href="#"><img src="http://placehold.it/300X200" alt=""></a> 
 
    </div> 
 
</div>