@keyframes
規則用於建立動畫。
@keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果
@keyframes 中建立動畫時，請把它**到某個選擇器，否則不會產生動畫效果。
通過規定至少以下兩項 css3 動畫屬性，即可將動畫繫結到選擇器：
規定動畫的名稱
規定動畫的時長
animation
animation 屬性是乙個簡寫屬性，用於設定動畫屬性：
animation-name：規定 @keyframes 動畫的名稱。
animation-duration：規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
animation-timing-function：規定動畫的速度曲線。預設是 "ease"。
animation-delay：規定動畫何時開始。預設是 0
animation-iteration-count：規定動畫被**的次數。預設是 1。
animation-direction：規定動畫是否在下一週期逆向地**。預設是 "normal"。
animation-fill-mode：規定物件動畫時間之外的狀態
側邊欄實現
複製**
**如下:
/* 動畫定義 */
@-webkit-keyframes move_right
to } @keyframes move_right
to } @-webkit-keyframes move_left
to } @keyframes move_left
to } @-webkit-keyframes move_up
to } @keyframes move_up
to }複製**
**如下:
/* 動畫繫結 */
.move_right
.move_left
.move_up
.fadein
.fadeinup
.fadeoutleft
html
複製**
**如下:
demo
sidebar
向左淡出&lwww.cppcns.comt;/button>
加入js
複製**
**如下:
以上就是使用css3製作側邊欄動畫效果的全部內容和**了，小夥伴們根據自己的專案需求來改善美化下就可以了哦。
本文標題: css3 實現側邊欄展開收起動畫
本文位址:
css3的動畫實現
關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...
css3的動畫實現
關鍵幀 keyframes 動畫名稱20 40 60 80 100 1 animation name 定義乙個或者多個動畫的名稱 eg demo 2 animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執...