30 Seconds of CSS代碼塊解讀(動畫篇)
這是第三篇解讀，主要包括加載效果，自定義過渡動畫函數(shù)和下劃線動畫。其中彈跳加載很具有實用性，可以用于加載組件中，讓加載效果更加個性化。
Bouncing loader(彈跳加載)
創(chuàng)建一個彈跳加載動畫。
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
說明：
-
@keyframes定義了一個具有兩種狀態(tài)的動畫，from等價于0%，to等價于100%。其中動畫是將元素的透明度變?yōu)?.1，同時在2D平面上將元素向上移動1rem。 - 父容器使用
flex布局將包裹元素進行居中。 -
animation是各種動畫屬性的縮寫屬性:animation-name, animation-duration, animation-iteration-count, animation-direction。在本例中，動畫名稱為bouncing-loader，動畫持續(xù)0.6s，無限播放(infinite)并且結束時反方向播放(alternate)。 -
animation-delay用來規(guī)定指定元素的動畫延遲相應的時間再播放。該屬性接受負值，表示提前到相應時間所對應的狀態(tài)，從當前狀態(tài)播放。
效果如下：
image
Donut spinner(加載圈)
創(chuàng)建一個表示內容加載的加載圈。
<div class="donut"></div>
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: donut-spin 1.2s linear infinite;
}
說明：
創(chuàng)建一個沒有背景的圓，然后聲明透明度為0.1的黑色邊框(看起來是灰色)，修改左側邊框顏色。此時會有一個靜態(tài)的看起來只有左邊框有顏色的空心圓。然后聲明一個該元素逆時針旋轉360度的動畫，并讓該動畫無限播放(infinite)即可。
Easing variables(簡化變量)
可以在transition-timing-function(過渡動畫函數(shù))使用變量，比ease, ease-in, ease-out 和 ease-in-out更加強大。
<div class="easing-variables"></div>
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.easing-variables {
width: 50px;
height: 50px;
background: #333;
transition: transform 1s var(--ease-out-quart);
}
.easing-variables:hover {
transform: rotate(45deg);
}
說明：
:rootCSS偽類與表示文檔的樹的根元素相匹配。 在HTML中，:root代表<html>元素，并且與選擇器html相同，只不過它的特異性更高。-
當鼠標移入當前元素時，元素按照指定的三次貝塞爾曲線變量進行過渡。
在CSS3中，定義三次貝塞爾曲線語法如下：
//每個點的取值范圍是0~1 cubic-bezier(P0,P1,P2,P3);
Height transition(高度過渡)
當元素高度未知的時候，將該元素的高度由0過渡到auto。該代碼段需要借助JavaScript。因為CSS無法獲取元素的實際高度。
<div class="trigger">
Hover me to see a height transition.
<div class="el">content</div>
</div>
.el {
transition: max-height 0.5s;
overflow: hidden;
max-height: 0;
}
.trigger:hover > .el {
max-height: var(--max-height);
}
var el = document.querySelector('.el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
說明：
- 先將元素
overflow: hidden，防止隱藏元素的內容溢出其容器。然后設置最大高度為0。 - 當觸發(fā)動畫時，將元素
max-height: var(--max-height)。這里的變量是由JS定義。 - 使用JS獲取元素的滾動高度
el.scrollHeight。然后設置--max-heightCSS變量，用于指定目標所在元素的最大高度，允許它從0平滑過渡到auto。
Hover underline animation(懸停下劃線動畫)
懸停文字上時創(chuàng)建動畫下劃線效果。
<p class="hover-underline-animation">Hover this text to see the effect!</p>
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
說明：
- 首先通過偽元素給文字創(chuàng)建一個下劃線，此時沒有任何動畫效果。
- 然后使用
transform：scaleX(0)將偽元素縮放為0，因此它沒有寬度并且不可見。 - 當鼠標懸浮時，使用
transform: scaleX(1)將下劃線縮放為1，此時寬度為文字寬度并可見。 - 如果不設置
transform-origin會發(fā)現(xiàn)動畫默認是從中心開始向兩邊擴散，因為這是默認值。所以當懸浮時，設置transform-origin: bottom left，動畫會從底層左側開始，直至縮放為1；當鼠標離開文本時，設置transform-origin: bottom right，動畫會從底層右側開始，直至縮放為0。
效果如下：
image
