CSS3動畫效果可以讓網頁更具動感,進入效果是其中一個重要的組成部分。通過CSS3動畫效果,我們可以制作出各種華麗的進入效果,從而讓網頁更具吸引力。
.box { opacity: 0; transform: translateY(-50%); animation-name: fadein; animation-duration: 1s; animation-delay: 0.5s; animation-fill-mode: forwards; } @keyframes fadein { 0% { opacity: 0; transform: translateY(-50%); } 100% { opacity: 1; transform: translateY(0%); } }
上述代碼展示了如何利用CSS3動畫效果來制作一個簡單的淡入效果。當網頁加載完成后,網頁中的元素都會以逐漸透明的方式出現,直到完全可見。
通過animation-name、animation-duration、animation-delay、animation-fill-mode等屬性,我們可以對動畫進行更加精細的控制,從而制作出各種類型的動畫效果,比如淡出效果、旋轉效果、放大效果等等。
上一篇css3 動態畫線
下一篇css3 動畫不循環