CSS 向上翻轉(zhuǎn)消失，是一種常見的動態(tài)效果，下面帶大家一起學(xué)習(xí)如何使用 CSS 實現(xiàn)這個效果。

.flip-up{
-webkit-animation-name: flip-up;
animation-name: flip-up;
-webkit-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-timing-function: cubic-bezier(.47, 0, .745, .715);
animation-timing-function: cubic-bezier(.47, 0, .745, .715);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: .7s;
animation-delay: .7s;
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
@-webkit-keyframes flip-up{
0%{
opacity: 1;
}
100%{
transform: rotateX(90deg);
opacity: 0;
}
}
@keyframes flip-up{
0%{
opacity: 1;
}
100%{
transform: rotateX(90deg);
opacity: 0;
}
}

以上代碼的實現(xiàn)方式為使用 animation 和 transform 實現(xiàn)，其中-webkit-*是為了適配不同的瀏覽器，并且也使用了關(guān)鍵幀（keyframes）動畫的方式。

需要注意的是代碼中的transform-origin，是動態(tài)效果產(chǎn)生的關(guān)鍵之一，因為我們需要實現(xiàn)的是一個向上翻轉(zhuǎn)的效果，所以我們讓其繞著底部旋轉(zhuǎn)。

最后，借助于animation-fill-mode的 forward 參數(shù)，可以讓動畫結(jié)束后元素保留最后一個狀態(tài)，也就是翻轉(zhuǎn)之后消失的狀態(tài)。

希望這篇文章對大家有所幫助，如果有不明白的地方可以在評論區(qū)留言，謝謝！