如何实现元素超出边界线的平滑过渡？

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

如何实现元素超出边界线的平滑过渡？

How to achieve a smooth transition of the element going outside the borderline?

html

css

transition

mask