像Twitter通知一样在CSS中滑动门动画

Question

我正在尝试模仿 Twitter的通知动画

这是我到目前为止所提出的：

$('button').click(function() {
  $('#left').css('width', '400px');
  $('#right').css('width', '400px');  
});

.wrapper {
  position: relative;
  min-height: 50px;
}

.left {
  position: absolute;
  left: 0;
  height: 50px;
  background: #00AEEF;
}

.right {
  position: absolute;
  right: 0;
  height: 50px;
  background: #00AEEF;
}

.banner {
  width: 0%;
  overflow: hidden;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="wrapper">
    <div id="left" class="banner left"></div>
    <div id="right" class="banner right"></div>
  </div>
  <div style="margin: 10px;">
    <button>start animation</button>
  </div>
</div>

但左右动画使用2个不同的div感觉就像是黑客。

是否有更好的内置css动画类型（用于单个div）？

Answer 1

滑动门效果（仅限）

（请参阅下面的全效演示）

您可以为放置在单个元素中的两个background-position的{​​{1}}设置动画（因此您甚至不需要再使用两个空元素进行样式设置），例如。

linear-gradients

只需通过div { background: linear-gradient(to left, #00AEEF 50%, transparent 0), linear-gradient(to right, #00AEEF 50%, transparent 0); background-position: 50vw 0, -50vw 0; background-repeat: no-repeat; height: 50px; transition: background-position 1s; } :checked + div { background-position: 0 0, 0 0; } 设置一个类来触发转换（为了简单起见，我已经用js伪类激活了效果）

  

Codepen demo

你也可以通过相反的动画获得相同的效果：如果你在蓝色:checked上放置一个白色渐变，你可以像这样设置渐变的background-color

background-size

  

Codepen demo

Comparing the two approaches我个人更喜欢最后一个（输入更少的代码，一个动画的单个渐变，看起来更平滑。此外，第二个演示可以防止有时在第一个问题中发生的恼人的舍入问题，当时重新定位两个渐变，正如您从下面的屏幕截图中看到的那样）

完全效果（包含所有动画/过渡）

要重新创建此通知的完整效果，标记和样式当然应该略有改变：从上一个演示开始，我将主效果移到包装器内的div { background: #00AEEF linear-gradient(to right, #fff, #fff); background-position: 50% 0; background-repeat: no-repeat; background-size: 100% 100%; height: 50px; transition: background-size 1s; } :checked ~ div { background-size: 0 100%; } 元素上，然后插入其他效果，如<a>使用动画进行脉动，最后在5秒后向下滑动。

右箭头由unicode符号@生成，它被放置为U+3009伪元素的content

注意：所有属性都没有前缀。必要时添加前缀

  

Codepen Demo (Full effect)

<强>标记

a::after

CSS （从谷歌字体嵌入Lato字体）

<div class="notification">
  <a href="#"><span>@</span>Miro mentioned you</a>
</div>

最终结果