如何实现元素向边界线外的平滑过渡?

Question

我有一个容器，里面有一个div。通过单击该div 方块，它开始移动并最终位于容器之外。

我的问题是，这个内部块在超出边界线时被修剪得非常苛刻。如何使用CSS方法更顺利地完成这种过渡？我想当这个正方形消失对眼睛变得温和时得到效果。

也许我应该为主容器使用某种图像蒙版，或者为正方形使用淡入淡出效果。我不确定如何实现这种行为。

提前谢谢你！

代码盘沙盒

.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