在CSS中,我們可以通過設置多個動畫來讓元素呈現更加生動的效果。我們可以使用特定的語法來設置多個動畫,如下所示:
animation: animation1 2s ease-out 1s, animation2 3s linear 4s;
在上述代碼中,我們使用逗號分隔了兩個動畫。每個動畫都有自己的關鍵幀、持續時間、延遲時間和過渡函數等屬性。
同時,我們還可以使用@keyframes關鍵字來設置更加復雜的動畫效果。在下面的代碼中,我們定義了一個名稱為"bounce"的關鍵幀動畫,它包括四個關鍵幀,分別改變元素的大小和位置。
@keyframes bounce { 0% { transform: translateY(-100%); } 50% { transform: scale(1.2); } 75% { transform: translateY(50%); } 100% { transform: translateY(0%); } }
我們可以在元素的CSS樣式中應用這個關鍵幀動畫,如下所示:
.class-name { animation: bounce 2s ease-out infinite; }
在上述代碼中,我們將名稱為"bounce"的關鍵幀動畫應用到了"class-name"類的元素中。動畫持續時間為2秒,使用了"ease-out"過渡函數,同時設置了無限循環。
通過這些技巧和語法,我們可以方便地在CSS中設置多個動畫效果,讓我們的頁面變得更加生動有趣。