京東方：TV 類產品價格 Q2 繼續承壓，但大幅下跌可能性不大
阿新 • • 發佈：2022-05-06
動畫
1. animation-name
- 定義動畫名稱
- 格式：animatio-name: move;
2. animation-duration
- 規定動畫時長
- 格式：animation-duration: 3s;
3. animation-timing-function
- 規定動畫如何完成一個週期
- 格式：animation-timing-function: ease;
| linear | 動畫從頭到尾的速度是相同的。 |
|---|---|
| ease | 預設。動畫以低速開始，然後加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
4. animation-delay
- 規定動畫在啟動前的延遲時間
- 格式：animation-delay: 3s;
5. animation-iteration-count
- 規定動畫播放次數
- 格式：animation-iteration-count: 3;
- infinite屬性值：無限次播放
6. animation-direction
- 規定是否應該輪流反向播放動畫，如果動畫被設定為只播放一次，該屬性將不起作用
- 格式：animation-direction: normal;
| 值 | 描述 |
|---|---|
| normal | 預設值。動畫按正常播放。 |
| reverse | 動畫反向播放。 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
7. animation-play-state
- 規定動畫是否正在執行或已暫停
- 格式：animation-play-state: running(預設值);
- paused屬性值：指定暫停動畫；running屬性值：指定正在執行動畫；
8. animation-fill-mode
- 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
- 格式：animation-fill-mode: both;
| 值 | 描述 |
|---|---|
| none | 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。 |
| forwards | 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。 |
| backwards | 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。 |
| both | 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
}
.box2{
width: 100px;
height: 100px;
background-color: #f00;
/*定義動畫的名稱*/
animation-name: move;
/*定義動畫的執行時間*/
animation-duration: 3s;
/*定義動畫的過渡效果*/
animation-timing-function: linear;
/*定義動畫的延遲時間*/
animation-delay: 2s;
/*定義動畫的執行次數(支援數字和infinite無限次)*/
animation-iteration-count: infinite;
/*定義動畫是否反向播放*/
animation-direction: alternate;
/*定義動畫當前是否播放*/
animation-play-state: running;
/*定義動畫
forwards 表示在動畫完成後繼續使用最後一個關鍵幀裡面的樣式。
backwards 表示在動畫開始之前使用初始關鍵幀裡面定義的樣式。
both 同時應用forwards和backwards的效果。
*/
animation-fill-mode: both;
}
.box1:hover .box2{
animation-play-state: paused;
}
@keyframes move{
0%{
transform: translate(0px,0px) rotateZ(0deg);
background-color: #000;
}
25%{
transform: translate(500px,0px) rotateZ(1000deg);
background-color: #0f0;
}
50%{
transform: translate(500px,500px) rotateZ(2000deg);
background-color: #00f;
width: 300px;
}
75%{
transform: translate(0px,500px) rotateZ(1000deg);
background-color: #ff0;
}
100%{
transform: translate(0px,0px) rotateZ(0deg);
background-color: #0ff;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>