1.過渡和動畫之間的異同
-
1.1不同點(diǎn)
- 過渡必須人為的觸發(fā)才會執(zhí)行動畫
- 動畫不需要人為的觸發(fā)就可以執(zhí)行動畫
1.2相同點(diǎn)
過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統(tǒng)新增的一些屬性
過渡和動畫都需要滿足三要素才會有動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫模塊-其它屬性上</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 50px;
background-color: red;
animation-name: sport;
animation-duration: 2s;
/*告訴系統(tǒng)多少秒之后開始執(zhí)行動畫*/
/*animation-delay: 2s;*/
/*告訴系統(tǒng)動畫執(zhí)行的速度*/
animation-timing-function: linear;
/*告訴系統(tǒng)動畫需要執(zhí)行幾次*/
animation-iteration-count: 3;
/*告訴系統(tǒng)是否需要執(zhí)行往返動畫
取值:
normal, 默認(rèn)的取值, 執(zhí)行完一次之后回到起點(diǎn)繼續(xù)執(zhí)行下一次
alternate, 往返動畫, 執(zhí)行完一次之后往回執(zhí)行下一次
*/
animation-direction: alternate;
}
@keyframes sport {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
div:hover{
/*
告訴系統(tǒng)當(dāng)前動畫是否需要暫停
取值:
running: 執(zhí)行動畫
paused: 暫停動畫
*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-動畫模塊-其它屬性下</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation-name: sport;
animation-duration: 5s;
}
@keyframes sport {
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
animation-name: myRotate;
animation-duration: 5s;
animation-delay: 2s;
/*
通過我們的觀察, 動畫是有一定的狀態(tài)的
1.等待狀態(tài)
2.執(zhí)行狀態(tài)
3.結(jié)束狀態(tài)
*/
/*
animation-fill-mode作用:
指定動畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
取值:
none: 不做任何改變
forwards: 讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
backwards: 讓元素等待狀態(tài)的時候顯示動畫第一幀的樣式
both: 讓元素等待狀態(tài)顯示動畫第一幀的樣式, 讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
*/
/*animation-fill-mode: backwards;*/
/*animation-fill-mode: forwards;*/
animation-fill-mode: both;
}
@keyframes myRotate {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
動畫模塊連寫
1.動畫模塊連寫格式
animation:動畫名稱 動畫時長 動畫運(yùn)動速度 延遲時間 執(zhí)行次數(shù) 往返動畫;2.動畫模塊連寫格式的簡寫
animation:動畫名稱 動畫時長;
