像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为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来触发转换(为了简单起见,我用:checked伪类激活了效果)

Codepen演示

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

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%; }

Codepen演示

比较两种方法我个人更喜欢最后一种方法(输入的代码越少,动画的单个渐变就越平滑.此外,第二个演示可以防止在重新定位两个渐变时有时会出现第一个问题的烦人的舍入问题发生,你可以从下面的截图中看到)

完整效果(包含所有动画/过渡)

要重新创建此通知的完整效果,标记和样式当然应该稍微改变:从上一个演示开始,我将主要效果移动<a>到包装器内的元素上,然后插入其他效果,如@动画和最终的脉冲5秒后滑下.

右箭头是Unicode符号制成U+3009并且其被放置为content所述的a::afterpseudoelement

注:所有属性都没有前缀.必要时添加前缀

Codepen演示(全效)

标记

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

CSS (从谷歌字体嵌入Lato字体)

* {
  font         : 1rem "Lato", Arial;
  box-sizing   : border-box;
}

.notification {
   position     : relative;
   overflow     : hidden;
   font-weight  : 100;
   font-size    : 1.5rem;
}

.notification a {
    display     : block;
    padding     : 1em 3em 1em 2.25em;
    width       : 100%;
    font-size   : inherit;
    font-weight : inherit;
    color       : transparent; 
    background  : #00AEEF linear-gradient(to right, #fff, #fff);
    text-decoration : none;    
    background-position : 50% 0;
    background-repeat   : no-repeat;
    background-size     : 100% 100%;
}

/* The at-sign: I've also tried to use :first-letter but it
 * is unreliable when the first char is not a letter or a digit
 */
.notification a span { 
    position    : absolute; 
    line-height : 1;
    top         : 50%; 
    left        : 50%;
    color       : #fff; 
    font-weight : bold;
    transform   : translate(-50%, -50%) scale(0);
    transform-origin : 50% 50%;
}

/* The arrow */
.notification a:after {
   position  : absolute;
   content   : "\3009";
   right     : 1em;
   top       : 50%;
   transform : translateY(-50%);  
}


/* sliding doors effect, color change and final slide down
 * all with proper delays 
 */
:checked ~ .notification a {  
  transition: background-size .2s, color .33s 1s, transform 1s 5s;
  transform: translateY(100%);
  background-size: 0 100%; 
  color: #fff;
}

/* pulsing and moving the @-sign */
:checked ~ .notification a span {
  animation: pulse-at .66s ease-in-out .33s forwards;
}


@keyframes pulse-at {
    0%   { transform: scale(0)   translate(-50%, -50%); }
    20%  { transform: scale(1.1) translate(-50%, -50%); }
    25%  { transform: scale(1)   translate(-50%, -50%); }
    40%  { transform: scale(1)   translate(-50%, -50%); left: 50%; }
    100% { transform: scale(1)   translate(0, -50%);    left: 1em; }
}

最后结果