CSS3 Animation是指基于CSS3當中的關鍵幀動畫,通過設置一些關鍵幀,在關鍵幀之間進行補間,完成一個復雜的動畫效果。
/* 定義一個卡的樣式 */ .card { width: 200px; height: 150px; background-color: white; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); padding: 20px; text-align: center; } /* 定義一個旋轉動畫 */ @keyframes rotate { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } /* 使用動畫效果 */ .card:hover { animation: rotate 2s ease-in-out; }
上述代碼中我們定義了一個名為.card的卡片樣式,然后通過定義關鍵幀動畫rotate,在hover狀態下應用動畫效果,讓卡片在垂直方向上旋轉。
CSS3 Animation是CSS3提供的很強大的動畫效果,使用它可以非常方便地為頁面添加一些吸引人的動畫效果,增強用戶體驗。
上一篇css2垂直居中