境界線の外に出る要素のスムーズな移行を達成する方法は？

Question

私は内部にdivを含むコンテナを持っています。その四角形の四角をクリックすると、移動し始めてコンテナの外側になります。

私の問題は、この内側のブロックが境界線を越えている間に本当に過酷な状態になっていることです。どのようにしてこの移行がCSS手段を使ってよりスムーズに行えるのでしょうか？この正方形が消えると、目に優しくなります。

多分私は、メインコンテナのためのある種のイメージマスク、または正方形のためのフェード効果を使用するはずです。私はその行動をどのように達成するのか正確にはわかりません。

ありがとうございます！

Codepan sandbox

.borderline { 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 150px; 
 
    width: 400px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #0087ff; 
 
} 
 

 
.square:focus { 
 
    transform: translateX(500px); 
 
    transition: all 2s; 
 
}

<div class='borderline'> 
 
    <div class='square' tabindex="1">Click me</div> 
 
</div>

Answer 1

多分あなたは次のように不透明であなたのCSSにアニメーションを追加することができます：それはの終わりにビットを点滅

.square:focus { 
    transform: translateX(500px); 
    transition: all 2s; 
    animation-name: example; 
    animation-duration: 1s; 

} 
@keyframes example { 
    0% {opacity:1} 
    50% {opacity:1} 
    100% {opacity:0} 

} 

https://codepen.io/anon/pen/rzppON