CSS3(4)---動畫(animation)
之前有寫過過渡：CSS3(2)--- 過渡(transition)
個人理解兩者不同點在於
過渡 只能指定屬性的 開始值 與 結束值，然后在這兩個屬性值之間進行平滑過渡來實現動畫效果，因此只能實現簡單的動畫效果。
動畫 除了定義 開始值 和 結束值，在這之間還可以定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現復雜的動畫效果。
一、動畫語法
1、屬性語法
語法格式
animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向;
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性
注意: 對於一個動畫而言有兩個屬性是必須的: 動畫名稱 和 規定完成動畫所花費的時間
2、速度曲線屬性
語法
animation-timing-function: linear; /* 動畫從頭到尾的速度是相同的 */
對於動畫的速度曲線屬性，有以下屬性值:
3、播放次數屬性
語法
animation-iteration-count: n|infinite; /* 播放n次 或者無限循環 */
對於播放次數屬性，有以下屬性值
4、輪流反向播放動畫屬性
語法
animation-direction: normal|alternate; /* 正常播放 或者 輪流反向播放 */
對於輪流反向播放動畫屬性，有以下屬性值
二、如何使用動畫
CSS3使用動畫只需要2步:1、定義動畫；2、調用動畫；
1、定義動畫
在CSS中，在使用動畫之前，我們必須使用@keyframes規則定義動畫。
語法
<style type="text/css">
@keyframes 動畫名 {
0% {
……
}
100% {
……
}
}
</style>
說明 0% 表示動畫的開始，100% 表示動畫的結束。0%和100% 是必須的，不過在一個@keyframes規則中可以由多個百分比構成，每一個百分比都可以定義
自身的CSS樣式，從而形成一系列的動畫效果。如果一個動畫僅僅只有0%和100%這兩個百分比的話，這時0%和100%還可以使用關鍵詞 from和to 來代表，其中0%對應的是
from，100%對應的是to。
2、調用動畫
調用動畫的語法上面已經寫過
animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向;
這里關鍵的點在於: 定義動畫的名稱 和調用動畫的名稱 一定要一致。
三、示例
1、示例
效果
這里設置了 無限播放次數 並且 輪流反向播放。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
/*調用動畫*/
/*animation:動畫名稱 花費時間 運動曲線 何時開始 播放次數 是否反方向;*/
animation: move 1s ease 0s infinite alternate;
}
/*聲明動畫 關鍵幀 @keyframes 動畫名稱 { } */
@keyframes move {
from {
left: 0;
background-color: red;
}
to {
left: 200px;
background-color: yellow; /* Safari 和 Chrome */
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、加載動畫
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫截圖</title>
<style type="text/css">
.bian{
width: 302px;
height: 129px;
margin: 100px auto;
border: 1px solid black;
}
.zi{
width: 69px;
height: 17px;
display: block;
margin: 0 auto;
margin-top: 104px;
}
.b1,.b2,.b3,.b4,.b5{
float: left;
width: 30px;
height: 36px;
margin-top: 32px;
margin-left:29px;
border-radius: 10px;
}
.b1{
background-color: red;
animation: dong 1s ease 1ms infinite;
}
.b2{
background-color: green;
animation: dong 1s ease 200ms infinite;
}
.b3{
background-color: #ffc1cd;
animation: dong 1s ease 400ms infinite;
}
.b4{
background-color: greenyellow;
animation: dong 1s ease 600ms infinite;
}
.b5{
background-color: cyan;
animation: dong 1s ease 800ms infinite;
}
@keyframes dong {
from{
height: 30px;/*原本 后來 進度 剛開始的什么樣*/
}
to{
transform: scale(1,2);/*縮放 前邊原本寬的倍數 后邊原本高的倍數 */
}
}
</style>
</head>
<body>
<div class="bian">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<span class="zi">loading...</span>
</div>
</body>
</html>
3、動畫 + 2D變形示例
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 214px;
height: 214px;
margin: 100px auto;
position: relative;
}
div img {
/*永遠循環的勻速轉動 */
animation: rotate linear 2s infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); /*旋轉360度*/
}
}
div p {
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 214px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="images/web.png" alt="">
<p> 轉轉</p>
</div>
</body>
</html>
### 參考
2、CSS3動畫
``` 你如果願意有所作為，就必須有始有終。(18) ```