推拉門動畫

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 demo

---

您也可以通過以下方式獲得相同的效果：相反的動畫：如果你把一個白色的梯度藍色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 demo

---

Comparing the two approaches我個人比較喜歡最後一個（輸入較少的代碼，一個單獨的漸變動畫，看起來更平滑。此外，第二演示防止了惱人的舍入問題，有時發生在第一個，重新定位兩個梯度發生時，因爲你可以從下面看到的截圖）

---

全效（帶所有的動畫/轉換）

要重新創建此通知的全部效果，標記和樣式當然應該稍微改變：從最後一個演示開始，我將主效應移動到包裝器中的<a>元素，並且我插入了其他效果，如@用動畫脈動並在5秒後最後滑下。

右箭頭是Unicode符號U+3009製成，它被放置爲a::after pseudoelement

注意的content：所有屬性都前綴的。添加必要

Codepen Demo (Full effect)

標記前綴

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

CSS（從谷歌的字體嵌入字體拉託）

* { 
    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; } 
} 

---

最終結果