過渡和動畫的基本介紹
- 過渡初始
-
- 過渡的四大要素
- 過渡的簡寫方式
- 動畫的建立
- 動畫的七大要素
- 動畫的播放和暫停
- 過渡和動畫的差別
過渡初始
過渡：元素從一種樣式變換為另一種樣式時為元素添加效果
過渡不同于動畫，他不會無緣無故的發生，過渡必須要觸發一個事件才能實作效果，滑鼠在hover狀态下相當于一個移入事件
過渡的四大要素
1、要控制的css屬性名，預設值：all，不是必需
2、完成過渡需要的時間，s,ms 1000ms=1s 必須要有
3、過渡的速度曲線，不是必需，ease預設值
ease 變速，規定慢速開始，然後變快，然後慢速結束的過渡效果
linear 勻速，規定以相同速度開始至結束的過渡效果
ease-in 規定以慢速開始的過渡效果
ease-out 規定以慢速結束的過渡效果
ease-in-out 規定以慢速開始和結束的過渡效果
cubic-bezier(n,n,n,n) 在cubic-bezier函數中定義自己的值可能的值是0至1之間的數值
4、過渡延遲時間，s,ms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過渡的四大要素</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*多個屬性可以逗号隔開*/
/*要控制的css屬性名*/
transition-property:width,background,height ;
/*完成過渡需要的時間*/
transition-duration: 2s,3s,5s;
/*過渡的速度曲線*/
/*transition-timing-function: linear;*/
transition-timing-function: linear,linear,ease;
/*過渡延遲時間，s，ms*/
transition-delay: 500ms,300ms,500ms;
}
.box:hover{
background: blue;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
過渡的簡寫方式
- 所有要控制的樣式使用相同的過渡方式
- 屬性值依次：all 完成過渡的時間 速度曲線 延遲開始時間
- 如果使用變速，速度曲線也可以不寫
- 如果延遲開始時間沒有，也可以不寫
- 要控制的樣式使用不同的過度方法
- 對要控制的css屬性分組，每一組可以書寫不同的過渡方式，組與組之間用逗号隔開
- 每一組書寫方法：要控制的css屬性名 完成過渡的時間 速度曲線 延遲開始時間
- 如果哪一組的值使用預設值，也可以不寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過渡的簡寫方式</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*transition: all 2s linear 1s;*/
/*transition: 2s linear 1s;*/
/*transition: 2s;*/
transition: width 2s 1s,height 3s,background 4s linear 1s;
}
.box:hover{
background: blue;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動畫的建立
動畫，通過改變元素的樣式給元素添加動畫
動畫的建立有兩種方式：
- from-to :from{}代表動畫開始；to{}代表動畫結束
- 百分比建立動畫（推薦使用）：0%{};代表動畫開始，後面可以設定多個關鍵幀，如：50%{};80%{}……，100%{};代表動畫結束。
- @keyframes用于建立一個動畫，動畫名稱自己設定
- 文法：animation：要綁定的動畫名稱 動畫完成的時間 速度曲線 延遲開始時間 播放次數 輪流反向播放 保持最後狀态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫初始</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
/*animation: name 10s linear 3s;*/
/*文法*/
/* animation：要綁定的動畫名稱 動畫完成的時間 速度曲線 延遲開始時間 播放次數 輪流反向播放 保持最後狀态*/
/* 延遲開始時間： s,ms*/
/* 播放次數：預設值為1次，infinite無限次播放*/
/*animation: name 5s 2;*/
/*animation: name 2s infinite;*/
/*輪流反向播放：預設值normal，輪流反向播放alternate，必須要有播放次數*/
/*animation: name 5s 2 alternate;*/
/*保持最後的狀态：forwards*/
animation: name 5s forwards;
}
/*@keyframes用于建立一個動畫，動畫名稱自己設定*/
@keyframes name {
/*!*動畫開始*!*/
/*from{width: 100px;height: 100px;background: red;}*/
/*!*動畫結束*!*/
/*to{width: 500px;height: 500px;background: blue;}*/
/*百分比指的是動畫完成時的百分比*/
0%{width: 100px;height: 100px;background: red;}
30%{width: 200px;height: 300px;background: green;}
50%{width: 200px;height: 300px;background: green;}
80%{width: 200px;height: 300px;background: yellow;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動畫的七大要素
1.要綁定的動畫名稱：必須要有
2. 動畫完成的時間：必須要有 s,ms
3. 速度曲線，預設ease變速，凡是隻要過渡能用的動畫都能用
4. 延遲開始時間： s,ms
5. 播放次數：預設值為1次，infinite無限次播放
6. 輪流反向播放：預設值normal，輪流反向播放alternate，必須要有播放次數
7. 保持最後的狀态：forwards
動畫的播放和暫停
animation-play-state規定動畫播放（running）還是暫停（paused）
動畫的暫停：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫的暫停</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
animation: name 10s;
}
.box:hover{
animation-play-state: paused;
}
/*@keyframes用于建立一個動畫，動畫名稱自己設定*/
@keyframes name {
0%{width: 100px;height: 100px;background: red;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
動畫的播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫的播放</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
animation: name 10s;
animation-play-state: paused;
.box:hover{
animation-play-state: running;
}
/*@keyframes用于建立一個動畫，動畫名稱自己設定*/
@keyframes name {
0%{width: 100px;height: 100px;background: red;}
100%{width: 500px;height: 500px;background: blue;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
過渡和動畫的差別
1.過渡需要事件觸發，動畫不需要事件觸發
2.過渡隻有開始-結束，動畫可以設定多個關鍵幀
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)