CSS3-7.2-CSS3動畫
CSS3動畫、CSS3動畫功能和CSS3動畫屬性
1.CSS3動畫是指使用CSS代碼讓網頁中的元素運動起來形成的動畫
2.CSS3動畫功能可以在許多網頁中取代動畫圖片、Flash動畫以及JavaScript
3.CSS3動畫屬性是多次過渡和變換的組合，同時可以設置播放次數，具有控制播放和暫停等功能
CSS3動畫
1.使用@keyframes創建關鍵幀動畫
2.使用animation調用關鍵幀動畫
一：使用@keyframes創建關鍵幀動畫
- @keyframes用於創建動畫
- 在@keyframes中設置CSS樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果
> @keyframes基本語法
@keyframes 動畫名稱{
階段1{CSS樣式}
階段1{CSS樣式}
階段1{CSS樣式}
}
動畫中階段的兩種方式寫法
1.每個階段用百分比表示，從0%到100%（起止必須設置，即0%和100%）
2.使用from和to表示從某階段到某階段
二：使用animation調用關鍵幀動畫
- 創建好一個動畫後，需要在CSS選擇器中使用animation動畫屬性，調用聲明好的關鍵幀動畫
- 動畫屬性中必須有動畫名稱和時長，否則動畫不生效
> animation基本語法
.div{
/* div調用frame這個關鍵幀動畫，5s完成所有動畫效果 */
animation:frame 5s;
}
三：CSS3 animation 動畫屬性
CSS3 animation 動畫屬性
1.animation：除 animation-play-state 之外的所有動畫屬性的簡寫屬性
2.animation-name：規定 @keyframes 動畫的名稱
3.animation-duration：規定完成一個動畫所需的秒或毫秒，默認是0
4.animation-timing-function：規定動畫的速度曲線
5.animation-delay：規定動畫何時開始
6.animation-iteration-count：規定動畫被播放的次數
7.animation-direction：規定動畫在下一次循環中是否輪流反向播放
8.animation-play-state：規定動畫是否正在運行或暫停
9.animation-fill-mode：規定對象動畫時間之外的狀態
1、animation
- 除 animation-play-state 之外的所有動畫屬性的簡寫屬性
- 需按照以下順序書寫屬性值
- 可以設置多個動畫，每個動畫之間用空格分隔
2、animation-name
- 規定 @keyframes 動畫的名稱
3、animation-duration
- 規定完成一個動畫所需時間
- 單位是秒或毫秒，默認是0
4、animation-timing-function
- 規定動畫的速度曲線
- 屬性值
- linear：勻速
- ease：默認值，逐漸變慢
- ease-in：加速
- ease-out：減速
- ease-in-out：加速然後減速
5、animation-delay
- 規定動畫何時開始
- 默認是0
6、animation-iteration-count
- 規定動畫被播放的次數，默認是1
- 使用infinite表示無限次播放
7、animation-direction
- 規定動畫在下一次循環中是否輪流反向播放
- 屬性值
- normal：默認值，動畫正常播放
- alternate：動畫輪流反向播放
8、animation-play-state
- 規定動畫是否正在運行或暫停
- 屬性值
- paused：設置動畫暫停
- running：設置動畫正在播放
9、animation-fill-mode
- 規定對象動畫時間之外的狀態
- 屬性值
- none：不改變默認行爲
- forwards：停留在動畫結束狀態
- backwards：停留在動畫開始狀態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS動畫</title>
<style type="text/css">
div{
width: 200px;
height: 30px;
}
.div1{
background-image: url(./background.jpg);
}
.div2{
background-color:blue;
}
@keyframes frame1{
from{
width: 200px;
}
to{
width: 400px;
}
}
@keyframes frame2{
0%{
width: 200px;
}
33%{
width: 300px;
}
100%{
width: 400px;
}
}
/* 通過設置單個屬性的屬性值進行修改 */
.div1{
/* 調用關鍵幀名稱 */
animation-name:frame1;
/* 關鍵幀執行時間 */
animation-duration: 3s;
/* 使用ease效果漸變 */
animation-timing-function: ease;
/* 動畫播放無限次 */
animation-iteration-count: infinite;
/* 動畫輪流反向播放 */
animation-direction:alternate;
}
/* 使用animation的縮寫形式進行設置 */
.div2{
animation: frame2 3s ease infinite alternate;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果動態圖
通過修改動畫的屬性來設置動畫的播放效果的方式有兩種
1.可以通過設置單個屬性的屬性值進行修改
2.使用animation的縮寫形式設置，屬性值的添加需按照順序添加