簡單的CSS動畫

（作者：郭海明，撰寫時間：2019年1月17日）

如果我們想讓一個長方塊沿水平方向移動，并且方塊是翻滾狀態(tài)下移動，
這個時候我們就可以通過一個簡單的CSS3方法來實(shí)現(xiàn)這個動作，
先在HTML里面設(shè)置一個類 類里面再包含一個div
然后給類設(shè)置屬性
這樣就可以得到一個長方塊

然后就可以通過CSS的 @keyframes 添加一個動畫名字并給名字添加關(guān)鍵幀，通過關(guān)鍵幀來控制長方塊的每一步動畫。，

如下圖：

我們可以通過如圖一起設(shè)置每個百分比translate(x,y)的x軸和Y軸的移動距離，讓長方塊達(dá)到移動的效果，
或translateX和translateY一起來設(shè)置移動效果，效果相同；
同時想讓長方塊在移動的時候附有翻滾的效果；就可以在transform里面加一個
rotate()并在每個百分比里面加入要翻滾的度數(shù)，并在度數(shù)后面加入度數(shù)單位(deg)
設(shè)置完這些之后

還要給它添加一個動畫animation， 把上面自命名的關(guān)鍵幀名字donghua加到這里
并給動畫設(shè)置一個時長（3s），播放方式(ease)， 無限播放(infinite)


這樣就可以達(dá)到移動的同時，長方塊跟著翻滾的效果了;

總結(jié)

以上是生活随笔為你收集整理的简单的CSS动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。