動畫屬性
- 動畫屬性需要滿足三要素才會有動畫效果
1.告訴系統(tǒng)需要執(zhí)行哪個動畫
2.告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫
3.告訴系統(tǒng)動畫持續(xù)的時長 - 動畫特點: 動畫不需要人為的觸發(fā)就可以執(zhí)行動畫
div{
width: 100px;
height: 100px;
background-color: green;
/*1.告訴系統(tǒng)執(zhí)行哪個動畫*/
animation-name: sport;
/*3.告訴系統(tǒng)動畫時長*/
animation-duration: 4s;
}
/*2.指定動畫名稱和動畫運動效果*/
@keyframes sport {
from{
margin-left: 0;
margin-top: 0;
}
to{
margin-left: 500px;
margin-top: 500px;
}
}
- 動畫模塊的其他屬性
- animation-delay: 2s;指定動畫延遲時間
- animation-timing-function: linear;指定動畫以何種速度類型運動
- animation-iteration-count: 3;指定動畫執(zhí)行次數
- animation-direction: alternate;指定動畫運動方向
- animation-play-state 告訴系統(tǒng)動畫是否暫停
取值:
running: 執(zhí)行動畫
paused: 暫停動畫
動畫狀態(tài)屬性
通過我們的觀察, 動畫是有一定的狀態(tài)的
1.等待狀態(tài)
2.執(zhí)行狀態(tài)
3.結束狀態(tài)animation-fill-mode作用:
指定動畫等待狀態(tài)和結束狀態(tài)的樣式
取值:
none: 不做任何改變
forwards: 讓元素結束狀態(tài)保持動畫最后一幀的樣式
backwards: 讓元素等待狀態(tài)的時候顯示動畫第一幀的樣式
both: 讓元素等待狀態(tài)顯示動畫第一幀的樣式, 讓元素結束狀態(tài)保持動畫最后一幀的樣式
動畫模塊連寫
- 1.動畫模塊連寫格式
animation:動畫名稱 動畫時長 動畫運動速度 延遲時間 執(zhí)行次數 往返動畫;
屬性連寫的前后順序可以任意 - 2.動畫模塊連寫格式的簡寫
animation:動畫名稱 動畫時長;
<style>
div{
width: 100px;
height: 100px;
background-color: red;
animation: sport 2s 2s linear alternate 3;
}
@keyframes sport {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
</style>
