CSS++是一個優秀的CSS動畫庫,它為網站添加了更多的動態效果和交互。而其中的回彈動畫則是很多人喜歡的一種效果。
.bounce { animation: bounce 0.5s; -webkit-animation: bounce 0.5s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); } }
上述代碼實現了一個簡單的回彈動畫。首先是給需要動畫的元素添加了一個class為bounce,接著是動畫部分的代碼。
animation和-webkit-animation分別是動畫屬性和瀏覽器私有變量。下面是具體的動畫實現,在50%的時候元素上移10像素,形成一個中間落差,隨后回到起始位置。
通過CSS++這種優秀的CSS動畫庫,回彈動畫已經非常簡單易用,是Web開發者能夠輕松為網站添加一些炫酷動態效果的好選擇。