- 過渡和動(dòng)畫之間的異同
1.1 不同點(diǎn)
- 過渡必須人為的觸發(fā)才會執(zhí)行動(dòng)畫
動(dòng)畫不需要人為的觸發(fā)就可以執(zhí)行動(dòng)畫
1.2 相同點(diǎn)
-
過渡和動(dòng)畫都是用來給元素添加動(dòng)畫的
過渡和動(dòng)畫都是系統(tǒng)新增的一些屬性
過渡和動(dòng)畫都需要滿足三要素才會有動(dòng)畫效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>100-動(dòng)畫模塊</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /*transition-property: margin-left;*/ /*transition-duration: 3s;*/ /*1.告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫*/ animation-name: lnj; /*3.告訴系統(tǒng)動(dòng)畫持續(xù)的時(shí)長*/ animation-duration: 3s; } /*2.告訴系統(tǒng)我們需要自己創(chuàng)建一個(gè)名稱叫做lnj的動(dòng)畫*/ @keyframes lnj { from{ margin-left: 0; } to{ margin-left: 500px; } } /*div:hover{*/ /*margin-left: 500px;*/ /*}*/ </style> </head> <body>
/*告訴系統(tǒng)多少秒之后開始執(zhí)行動(dòng)畫*/ animation-delay: 2s; /*告訴系統(tǒng)動(dòng)畫執(zhí)行的速度*/ animation-timing-function: linear;
取值：linear
| ease | 默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
| ease-in | 動(dòng)畫以低速開始。
| ease-out | 動(dòng)畫以低速結(jié)束。
| ease-in-out | 動(dòng)畫以低速開始和結(jié)束。
| cubic-bezier(n,n,n,n) |在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。
/*告訴系統(tǒng)動(dòng)畫需要執(zhí)行幾次*/
animation-iteration-count: 3;
/*告訴系統(tǒng)是否需要執(zhí)行往返動(dòng)畫
取值:
normal, 默認(rèn)的取值, 執(zhí)行完一次之后回到起點(diǎn)繼續(xù)執(zhí)行下一次
alternate, 往返動(dòng)畫, 執(zhí)行完一次之后往回執(zhí)行下一次
*/
animation-direction: alternate;
/*
告訴系統(tǒng)當(dāng)前動(dòng)畫是否需要暫停
取值:
running: 執(zhí)行動(dòng)畫
paused: 暫停動(dòng)畫
*/
animation-play-state: paused;
3.通過我們的觀察, 動(dòng)畫是有一定的狀態(tài)的
- 等待狀態(tài)
- 執(zhí)行狀態(tài)
- 結(jié)束狀態(tài)
-
animation-fill-mode作用:
指定動(dòng)畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
取值:
none: 不做任何改變
forwards: 讓元素結(jié)束狀態(tài)保持動(dòng)畫最后一幀的樣式
backwards: 讓元素等待狀態(tài)的時(shí)候顯示動(dòng)畫第一幀的樣式
both: 讓元素等待狀態(tài)顯示動(dòng)畫第一幀的樣式, 讓元素結(jié)束狀態(tài)保持動(dòng)畫最后一幀的樣式/*animation-fill-mode: backwards;*/ /*animation-fill-mode: forwards;*/ animation-fill-mode: both; 動(dòng)畫模塊連寫
5.1. 動(dòng)畫模塊連寫格式
animation:動(dòng)畫名稱 動(dòng)畫時(shí)長 動(dòng)畫運(yùn)動(dòng)速度 延遲時(shí)間 執(zhí)行次數(shù) 往返動(dòng)畫;
animation: name duration timing-function delay iteration-count direction;
5.2. 動(dòng)畫模塊連寫格式的簡寫
animation:動(dòng)畫名稱 動(dòng)畫時(shí)長;
