最近html/css仿制ios11的動畫越來越流行了，那么你有沒有嘗試過這樣做呢？今天我們就來一起探討下如何使用css模仿ios11的動畫效果。

首先，我們需要了解ios11的動畫特點，以便更好地實現(xiàn)效果。ios11的動畫表現(xiàn)出來非常柔和，是一種具有彈性的動畫效果。這種效果是通過三個關鍵點來達到的：

起點 ====>最高點 ====>終點

這三個關鍵點的實現(xiàn)，可以通過css中的關鍵幀動畫來達到，需要定義起點、最高點和終點三個關鍵幀。假設，我們要實現(xiàn)一個按鈕的動畫效果，可以通過以下代碼來實現(xiàn)：

.btn {
position: relative;
display: inline-block;
padding: 12px 24px;
font-size: 18px;
font-weight: 600;
color: #fff;
background-color: #007aff;
border-radius: 4px;
overflow: hidden;
}
.btn:before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.btn:active:before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.2s, opacity 0.5s;
animation: burst 0.5s ease-out forwards;
}
@keyframes burst {
0% { transform: scale(0); opacity: 1; }
40% { transform: scale(1); opacity: 0.3; }
100% { opacity: 0; }
}

上面的代碼中，通過設置偽元素:before，來實現(xiàn)“起點”、“最高點”和“終點”的關鍵幀動畫。當按鈕被點擊時，button元素上方出現(xiàn)了一個橢圓形的高光，隨著動畫的播放，高光呈現(xiàn)出一個彈性的效果。原理就是利用了縮放動畫的彈性，從前往后縮放，配合透明度的變化，實現(xiàn)了模擬ios11的動畫效果。

好了，以上就是今天我們要討論的css模仿ios11的動畫效果，簡單又實用，希望可以為你的web頁面增添動感。