-
transition
- transition-property 過渡屬性
- transition-duration 過渡持續(xù)時間
- transition-delay 過渡延遲時間
- transition-timing-function 過渡時間函數(shù)
-
animation
- animation-name 動畫名稱
- animation-duration 持續(xù)時間
- animation-timing-function 動畫的播放過渡類型
- animation-iteration-count 動畫執(zhí)行的次數(shù)
- animation-direction 動畫的運動方向
- animation-play-state 動畫的播放狀態(tài)
- animation-delay 延遲時間
- animation-fill-mode 動畫播放完畢時的狀態(tài)
- @keyframes 關鍵幀定義
動畫
transition
通過過渡transition，可以讓web前端開發(fā)人員不需要javascript就可以實現(xiàn)簡單的動畫交互效果垫蛆。
都知道幀動畫的本質(zhì)其實就是畫面一張張的切換,由于速度關系,肉眼分辨不出,所以看起來就是連續(xù)的畫面,transition干的,其實就是類似的事情
過渡transition是一個復合屬性减细，包括transition-property恋昼、transition-duration画髓、transition-timing-function怠肋、transition-delay這四個子屬性洁奈。通過這四個子屬性的配合來完成一個完整的過渡效果
| 屬性名 | 作用 |
|---|---|
| transition-property | 過渡屬性(默認值為all) |
| transition-duration | 過渡持續(xù)時間(默認值為0s)(必需值且不能為0) |
| transiton-timing-function | 過渡函數(shù)(默認值為ease函數(shù)) |
| transition-delay | 過渡延遲時間(默認值為0s) |
tips:
需要注意的是,如果發(fā)現(xiàn)沒有過渡效果,可能是沒有一個 起始值；
IE9-不支持該屬性栋盹，safari3.1-6施逾、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴例获；而其余高版本瀏覽器支持標準寫法汉额；
語法:
-
組合語法方式
-
transition:過渡CSS屬性 持續(xù)時間 動畫方式 延遲時間;
- transition-duration和transition-delay都是時間。
當兩個時間同時出現(xiàn)時榨汤，第一個是transition-duration蠕搜，第二個是transition-delay；
當只有一個時間時件余，它是transition-duration讥脐，而transition-delay為默認值0；
- transition-duration和transition-delay都是時間。
-
具體代碼
所有屬性 1s動畫 ease-in動畫方式 延遲2s
transition: all 1s ease-in 2s;
-
-
多屬性過渡組合寫法 通過逗號分隔
空格隔開的代表不同屬性的四個關于過渡的子屬性
-
transition:過渡1,過渡2....
transition: <single-transition> [',' <single-transition>]* -
具體代碼
/** * top屬性 1s動畫 ease-in動畫方式 * left屬性 1s動畫 ease-out動畫方式 延遲1s * width屬性 1s動畫 liner動畫方式 延遲2s * height屬性 1s動畫 ease-in-out動畫方式 延遲3s * background-Color屬性 1s動畫 ease動畫方式 延遲4s */ transition: top 1s ease-in, left 1s ease-out 1s, width 1s ease-liner 2s, height 1s ease-in-out 3s;
-
transition-property 過渡屬性
transition-property: none | <single-traisition-property> [ ',' <single-transition-property>]*
<single-transition-property> = all | <IDENT>
transition-property: none;
transition-property: all;
transition-property: left;
transition-property: left, color;
-
取值
- none: 沒有指定任何樣式
- all: 默認值啼器，表示指定元素所有支持transition-property屬性的樣式
- transition-property: 應用過渡效果的樣式旬渠，可用逗號分開寫多個樣式
可過渡的樣式
不是所有的CSS樣式值都可以過渡，只有具有中間值的屬性才具備過渡效果
| 可過渡的樣式 | |
|---|---|
| 顏色 | color background-color border-color outline-color |
| 位置 | backround-position left right top bottom |
| 長度 | [1]max-height min-height max-width min-width height width |
| [2]border-width margin padding outline-width outline-offset | |
| [3]font-size line-height text-indent vertical-align | |
| [4]border-spacing letter-spacing word-spacing | |
| 數(shù)字 | opacity visibility z-index font-weight zoom |
| 組合 | text-shadow transform box-shadow clip |
| 其他 | gradient |
transition-duration 過渡持續(xù)時間
transition-duration: <time>[, <time>]*
transition-duration: 0s;
transition-duration: 1s;
transition-duration: 1s, 2s, 3s;
- 值是時間,單位是秒s或者毫秒ms
- 該屬性不能為負值
- 默認值為0s端壳，若為0則為無效值告丢。所以必須帶單位
- 該值為單值時，即所有過渡屬性都對應同樣時間损谦；該值為多值時岖免，過渡屬性按照順序對應持續(xù)時間
transition-delay 過渡延遲時間
transition-delay: <time>[,<time>]*
transition-delay: 0s;
transition-delay: 1s;
transition-delay: 1s, 2s, 3s;
- 值是時間,單位是秒s或者毫秒ms
- 該屬性若為負值，無延遲效果照捡，但過渡元素的起始值將從0變成設定值(設定值=延遲時間+持續(xù)時間)颅湘。若該設定值小于等于0，則無過渡效果栗精；若該設定值大于0闯参，則過渡元素從該設定值開始完成剩余的過渡效果
transition-timing-function 過渡時間函數(shù)
過渡時間函數(shù)用于定義元素過渡屬性隨時間變化的過渡速度變化效果
transition-timing-function: <single-transition-timing-function>[',' <single-transition-timing-function>]*
<!-- 默認函數(shù)為 ease -->
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) | step-start | step-end | steps(<integer>)[, [start | end]]?)
<!-- 對于 cubic-bezier 的曲線，前兩個值為 P1 的坐標悲立，后兩值為 P2 的坐標 -->
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
-
取值:關鍵字鹿寨、steps函數(shù)和bezier函數(shù)
-
關鍵字
- ease: 開始和結束慢，中間快薪夕。默認值.相當于cubic-bezier(0.25,0.1,0.25,1)
- linear: 勻速脚草。相當于cubic-bezier(0,0,1,1)
- ease-in: 開始慢。相當于cubic-bezier(0.42,0,1,1)
- ease-out: 結束慢原献。相當于cubic-bezier(0,0,0.58,1)
- ease-in-out: 和ease類似馏慨，但比ease幅度大。相當于cubic-bezier(0.42,0,0.58,1)
- step-start: 直接位于結束處姑隅。相當于steps(1,start)
- step-end: 位于開始處經(jīng)過時間間隔后結束熏纯。相當于steps(1,end)
-
貝塞爾曲線動畫
- 在設置動畫曲線的位置通過
cubic-bezier()的方式進行設置 - 計算貝塞爾曲線在線網(wǎng)址
- 語法:
/* 其中 需要傳入四個值,并且每個值都是0-1的小數(shù)*/ transition: top 1s cubic-bezier(0.1,0.2,0.3,0.4);
- 在設置動畫曲線的位置通過
-
step動畫 設置
過渡的動畫次數(shù)-
語法:
/* 1s動畫 每隔 1/6 s 完成一次 在每次間隔的 末尾 開始動畫 */ transition: top 1s steps(6,end); /* 1s動畫 每隔 1/6 s 完成一次 在每次間隔的 開始 開始動畫 */ transition: top 1s steps(6,start); steps步進函數(shù)將過渡時間劃分成大小相等的時間時隔來運行
steps步進函數(shù)為steps(<integer>[,start | end]?)
<integer>:用來指定間隔個數(shù)(該值只能是正整數(shù))
第二個參數(shù): 該參數(shù)可選，默認是end粤策，表示開始值保持一次樟澜；若參數(shù)為start，表示開始不保持
-
-
過渡步進函數(shù).png
animation
使用過渡,可以實現(xiàn)絕大多數(shù)的效果,但是需要對效果進行定制時,可以通過動畫animation來實現(xiàn)
過渡的優(yōu)缺點
transition的優(yōu)點在于簡單易用叮盘，但是它有幾個很大的局限秩贰。
- transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生柔吼。
- transition是一次性的毒费，不能重復發(fā)生，除非一再觸發(fā)愈魏。
- transition只能定義開始狀態(tài)和結束狀態(tài)觅玻，不能定義中間狀態(tài)想际，也就是說只有兩個狀態(tài)。
- 一條transition規(guī)則溪厘，只能定義一個屬性的變化胡本，不能涉及多個屬性。
CSS Animation就是為了解決這些問題而提出的畸悬。
語法
使用動畫時,我們首先需要定義一組動畫,在動畫過程中我們可以對動畫的步驟進行控制
-
定義動畫:
使用@keyFrames 關鍵字定義/*動畫名為:changeColor 開始背景為紅色侧甫，寬度100px 中途背景為橘色，rotate100度 結束為黃色蹋宦，寬度200px 沒有設置值 會使用 默認值 多個屬性可以直接添加 */ @keyframes changeColor{ from{ /* 關鍵字from也可以寫為 0% */ background-color:red; width:100px; } 50%{ background-color:orange; transform:rotate(100deg); } to{ /* 關鍵字to也可以寫為 100% */ background-color:yellow; height:200px; } } -
使用動畫
動畫的使用 需要通過animation這個屬性,他是一個復合屬性,但是再添加子屬性時,除時間外,順序可以打亂animation: <single-animation> [',' <single-animation>]* <single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> /* 復合寫法 保證 第一個時間 是動畫時間 第二個時間 是延遲時間 其余屬性的位置可以任意寫 animationName 是動畫名稱的意思 */ animation: animationName 1s infinite ease-in forwards 1s; animation: none; animation: abc 2s; <!-- 調(diào)用多個動畫披粟，用逗號隔開 --> animation: abc 1s 2s both, abcd 2s both;
tips:動畫可自動運行，但transition需要觸發(fā)冷冗。
animation-name 動畫名稱
animation-name 的名字可自由定義守屉。
animation-name: <single-animation-name>#
<single-animation-name> = none | <IDENT>
animation-name: none;
animation-name: sevenColor;
animation-name: abc, abcd;
animation-duration 持續(xù)時間
與 transition-duration 屬性值類似。
animation-duration: <time>[, <time>]*
animation-duration: 0s;
animation-duration: 1s;
animation-duration: 1s, 2s, 3s;
animation-timing-function 動畫的播放過渡類型
其與之前的 transition-timing-function 完全一模一樣蒿辙。
animation-timing-function: <timing-function>#
<single-timing-function> = <single-transition-timing-function>
animation-timing-function: ease;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-timing-function: linear;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-timing-function: ease, linear;
animation-iteration-count 動畫次數(shù)(具體次數(shù),或者無限次)
其用于動畫執(zhí)行的次數(shù)（其默認值為 1）胸梆。
animation-iteration-count: <single-animation-iteration-count>#
<single-animation-iteration-count> = infinite | <number>
animation-iteration-count: 1;
animation-iteration-count: infinite;
animation-iteration-count: 1, 2, infinite;
animation-direction 動畫的運動方向
其用于定義動畫的運動方向。
animation-direction:<single-animation-direction>#
<single-animation-direction> = normal | reverse | alternate | alternate-revers
animation-direction: reverse
<!-- 動畫相反幀的播放 -->
animation-direction: alternate
<!-- 往返執(zhí)行動畫 -->
animation-direction: alternate-revers
<!-- 相反的往返動畫 -->
animation-play-state 動畫的播放狀態(tài)
播放running 或者 暫停paused
animation-play-state: <single-animation-play-state>#
<single-animation-play-state> = running | paused
animation-play-state: running;
animation-play-state: pasued;
animation-play-state: running, paused;
animation-delay 延遲時間
其用于設置動畫的延時须板，同 transition-delay 值相同碰镜。
animation-delay: <time>[, <time>]*
anim
animation-delay: 0s;
animation-delay: 1s;
animation-delay: 1s, 2s, 3s;
animation-fill-mode 動畫播放完畢時的狀態(tài) (還原,結束值),一般是 固定次數(shù)的動畫 配合使用
其用于設置動畫開始時，是否保持第一幀的動畫和動畫在結束時時候保持最后的狀態(tài)习瑰。
animation-fill-mode: <single-animation-fill-mode>[',' <single-animation-fill-mode>]*
<single-animation-fill-mode> = none | backwards | forwards | both
animation-fill-mode: none;
<!-- 不做設置 -->
animation-fill-mode: backwards;
<!-- 動畫開始時出現(xiàn)在第一幀的狀態(tài) -->
animation-fill-mode: forwards;
<!-- 動畫結束時保留動畫結束時的狀態(tài) -->
animation-fill-mode: both;
<!-- 開始和結束時都應保留關鍵幀定義的狀態(tài)（通常設定） -->
animation-fill-mode: forwards, backwards;
@keyframes 關鍵幀定義
其用于定義關鍵幀绪颖。
<!-- 寫法一 -->
@keyframes abc {
from {opacity: 1; height: 100px;}
to {opacity: 0.5; height: 200px;}
}
<!-- 寫法二 -->
@keyframes abcd {
0% {opacity: 1; height: 100px;}
100% {opacity: 0.5; height: 200px}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
<!-- 例子 -->
animation: abc 0.5s both;
animation: flash 0.5s both;
animaiton: abc 0.5s both, flash 0.5s both;
animation-sample.gif
