使用CSS動畫讓頁面元素反彈起來

一、動畫原理

CSS動畫通過對元素的樣式屬性進行變化以實現動畫效果。為了讓元素能夠反彈起來，我們需要使用CSS中的transform屬性以及animation屬性。具體而言，我們需要對元素進行位移變換，並且在位移過程中加上彈性效果，也就是利用CSS的cubic-bezier()函數來實現。利用animation屬性，我們可以控制動畫的播放時長，是否循環播放等。

.bounce {
    animation: bounce 1s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes bounce {
    0%, 100% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(0,-25px);
        animation-timing-function: cubic-bezier(0.5,1.6,0.4,0.8);
    }
}

二、代碼解析

上面的代碼片段中，我們首先定義了一個類名為「bounce」的元素，這個元素就是我們需要反彈的目標元素。接下來我們對這個元素定義了animation屬性，其中「bounce」是動畫的名稱，1s表示動畫播放時長為1秒，ease-in-out表示動畫為緩入緩出，infinite表示循環播放。

為了讓元素能夠在垂直方向上反彈，我們需要將transform-origin屬性設為「center bottom」，使得元素在變換時以底部為基準點。

下面的@keyframes規則定義了動畫的過程。由於我們需要讓元素在垂直方向上反彈，我們定義了兩個transform屬性：0%和100%時元素的位移是「translate(0,0)」，也就是不進行位移；50%時元素的位移是「translate(0,-25px)」，也就是在垂直方向上進行向上的位移。同時，我們使用了animation-timing-function屬性並給它傳入一個cubic-bezier函數，以實現彈性效果。

三、應用示例

下面是一個應用示例，我們可以使用這個代碼創建出一個反彈的球：

 .container {
 width: 320px;
 height: 480px;
 background-color: #212121;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .ball {
 width: 50px;
 height: 50px;
 background-color: #00bcd4;
 border-radius: 50%;
 animation: bounce 1s ease-in-out infinite;
 transform-origin: center bottom;
 }
 @keyframes bounce {
 0%, 100% {
 transform: translate(0,0);
 }
 50% {
 transform: translate(0,-25px);
 animation-timing-function: cubic-bezier(0.5,1.6,0.4,0.8);
 }
 }
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/206967.html