夜靈的Html筆記Day13——CSS3過渡、animation動畫

1、CSS3-過渡
1、什麼是過渡
使得CSS屬性值，在一段時間內，平緩變化的一個效果
2、過渡的要素 & 屬性
1、指定過渡屬性(必須的)
作用：指定哪個 css屬性值，在變化時要使用過渡的效果
語法：transition-property
取值：
1、none
默認值，不使用過渡
2、all
能使用過渡效果的屬性全部都使用過渡
3、具體屬性名稱
ex:
   transition-property:border-radius;邊框倒角


頁面中允許設置過渡的屬性：
1、顏色屬性    color 
2、取值爲數值的屬性       
   width,height,border,margin,padding,top,right,bottom,left....
3、轉換       transform:位置，旋轉，傾斜，縮放
              transform-origin:px,%,關鍵詞
4、漸變屬性    background:linear-gradient()
5、visibility屬性   從無到有
6、陰影屬性    box-shadow: 
2、指定過渡時長(必須的)
語法：transition-duration
取值：以 s 或 ms 爲單位的數值
1s = 1000ms
***：該屬性值，默認爲0，即不會有任何過渡效果
3、指定過渡速度時間曲線函數
        指定速率
語法：transition-timing-function
取值：
1、ease
默認值,(慢速開始，快速變快，慢速結束)
2、linear
勻速
3、ease-in
慢速開始，快速結束...
4、ease-out
快速開始，減速結束...
5、ease-in-out
慢速開始和結束，先加速後減速
4、指定過渡延遲時間
延遲：用戶激發操作後，等待多長時間再顯示效果
語法：transition-delay
取值：數值（以 s 或 ms 爲單位的）
5、過渡的簡寫方式
單寫屬性：
  transition:property duration timing-function delay;
                        多寫：先後依次多寫
transition:prop1 dur1 timing1 delay1,prop2 dur2;










pm:


1、動畫(animation)
1、什麼是動畫
使得元素從一種樣式逐漸變化爲另一種樣式的過程
動畫是複雜的過渡
動畫是通過 “關鍵幀” 來控制每個步驟
關鍵幀：由時間 和 動作來組成
2、動畫的使用步驟
1、聲明動畫
1、爲動畫定義名稱
2、定義動畫的所有關鍵幀
2、爲元素調用動畫
3、聲明動畫的語法
通過 @keyframes 的規則來聲明動畫
             語法:
@keyframes 名稱{
/*聲明 若干 關鍵幀 （時間 ：動作(樣式)）*/
0% | from{
/*動畫開始時的動作(樣式)*/
}
25%{
/*動畫運行在1/4時的動作*/
}
50%{
     /*動畫運行一半時的動作*/
}
100% | to{
/*動畫結束時的動作(樣式)*/
}
}
***:
兼容性
@-webkit-keyframes 名稱{}
@-moz-keyframes 名稱{}
@-o-keyframes 名稱{}
@-ms-keyframes 名稱{}
4、調用動畫的語法
1、animation-name
指定當前元素 調用的動畫名稱
2、animation-duration
指定當前動畫執行的總時長(一次動畫過程)
取值：以 s 或 ms 作爲單位的數值
3、animation-timing-function
指定動畫執行時的速度時間曲線函數
ease,
linear,
ease-in,
ease-out,
ease-in-out


4、animation-delay
延遲
5、animation-iteration-count
指定動畫的播放次數
取值：
1、具體數值
2、infinite
無限次播放
6、animation-direction
指定動畫的播放方向
取值：
1、normal
默認值，從 0% ~ 100%
2、reverse
從100% ~ 0%
3、alternate
輪流播放
奇數播放次數時，從0%~100%
偶數播放次數時，從100%~0%
7、動畫簡寫
animation:name duration timing-function delay iteration-count direction;




8、animation-fill-mode
指定動畫播放"前後"的填充模式
取值：
1、none 
默認行爲
2、forwards
動畫完成後，保持在最後一個幀的狀態上
3、backwards
動畫播放前(延遲時間內)，保持在第一個幀的狀態上
4、both
動畫播放前後分別保持在第一幀和最後一幀的狀態上
9、animation-play-state
指定動畫的播放狀態(暫停 | 播放)
取值：
1、paused
動畫暫停
2、running
動畫播放