css 過度與動畫
過度
- 流程：
① 給要過渡的元素設置初始狀態；
② 設置要過渡的元素設置最終狀態；
③ 給要過渡的html標籤設置過渡屬性【必須值爲過渡時間】
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: gray;
transition: 5s;
}
div:hover{
height: 500px;
width: 500px;
background: rgb(160, 99, 99);
}
</style>
</head>
<body>
<div>
- 過渡屬性值詳解
(1) 過渡屬性transition-property：該屬性是用來指定當元素其中一個屬性改變時執行的過渡動畫效果，該屬性有三種類型的值：
① none 將過渡效果設置爲“無過渡效果”，或停止當前過渡效果。
② all （默認）爲所支持的所有CSS屬性在值變化時執行動畫過渡效果。
③ [property name] 指定一個或多個屬性名稱列表，以逗號“,”進行分隔，當指定的屬性產生變化時，爲其執行指定屬性的動畫過渡效果。
(2)過渡時間 transition-duration：該屬性是用於設定一個屬性的值過渡被觸發開始時到結束時所需要經歷的時間，單位爲秒（s），如：“0.3s”或“.3s”,它的默認值爲“0”，單位不能省略，否則過渡動畫無法執行。
(3)過渡時間曲線transition-timing-function
該屬性允許你根據時間的推進去改變屬性值的變換速率，目前它可能夠設置6個類型的值：
ease默認值，逐漸減速。
linear勻速。
ease-in加速。
ease-out減速。
ease-in-out先加速，後減速。
提示
通過cubic-bezier([參數])設置貝塞爾曲線也能做到時間曲線控制，但是較爲複雜，有興趣可以去私下研究下。
(4)過渡延遲transition-delay
該屬性規定在用戶進行操作後多久開始執行動畫，也就是延遲執行過渡動畫的時間，單位同樣是秒“s”，寫法與“transition-duration”一致，默認值同樣爲“0”。
(5)綜合值transition
和其它大多數CSS樣式設置屬性一樣，transition屬性也支持多值組合的寫法，而且也是實際開發中最爲常用的寫法，能大大地節約代碼量。
但在編寫該屬性的時候要注意允許過渡的屬性一般只寫成all或者單個屬性名，如果寫成由逗號分隔的屬性集合，如果寫出以逗號分隔的屬性集合，那麼就只會使用最後一個屬性爲運行過過渡的屬性。
Css動畫
- css動畫和css過渡的區別
(1)動畫可以不需要任何事件的激活（當然也可以通過事件激活）讓元素本身就“掛載”一系列的CSS屬性變化，即一初始化就開始執行動畫
(2)動畫可以單獨地存在並被不同的標籤元素調用。
(3)默認動畫返回時是一瞬間完成，而不像過渡一樣緩慢的還原。【除非讓動畫的終止狀態爲初始狀態的樣式】
(4)動畫能夠“無限次”地執行動畫。
- css動畫使用流程
(1)定義一個動畫
(2)在html元素中調用需要的動畫（調用後時可以設置各種動畫相關屬性）
- css動畫使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 200px;
width: 200px;
background: rgb(185, 81, 81);
animation: my-a-name 2s;
}
/* @keyframes：用於聲明一個動畫，後面跟動畫名稱與動畫實現 */
@keyframes my-a-name {
/* 動畫執行過程 */
from {
width: 200px;
}
to {
width: 500px;
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
css動畫定義方式
/* @keyframes：用於聲明一個動畫，後面跟動畫名稱與動畫實現 */
@keyframes my-a-name {
/* 動畫執行過程 */
}
css動畫過程定義
定義動畫過程有兩種方式，一種爲“英文單詞”定義模式，一種爲“百分數”定義模式。
英文單詞模式
from：表示動畫開始時執行的CSS屬性
to： 表示動畫結束時執行的CSS屬性
英文模式
@keyframes my-a-name {
/* 動畫執行過程 */
from {
width: 200px;
}
to {
width: 500px;
}
}
百分數模式
該模式能夠支持從“0%”到“100%”之間的所有幀的定義
“0%”相當於“from”，表示動畫開始幀，
“100%”相當於“to”，表示動畫結束幀。
代碼：
/* @keyframes：用於聲明一個動畫，後面跟動畫名稱與動畫實現 */
@keyframes my-a-name {
/* 動畫執行過程 */
0% {
width: 200px;
height: 200px;
}
}
50% {
width: 800px;
height: 800px;
background: rgb(136, 64, 204);
}
100% {
width: 200px;
height: 200px;
}
}
注意事項
動畫如果是從0%或者from開始變化的，那麼我們應該讓0%或者from的狀態爲標籤元素的初始狀態。否則會導致動畫開始時發生突變。（由標籤的當前狀態突變爲動畫的0%或者from的狀態）可以加個動畫延時進行顯示的查看。
-
在變化過程中，單詞模式和百分比模式可以混用。
-
在動畫執行過程中，如果從當前狀態到下一個狀態，如果想要從上一個狀態開始動的而不是瞬間動的，需要在下一個狀態設置上一個狀態不變的動畫屬性
圍繞網頁旋轉的動畫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
div {
height: 10%;
width: 10%;
background: rgb(185, 81, 81);
position: relative;
animation: my-a-name 10s;
}
/* @keyframes：用於聲明一個動畫，後面跟動畫名稱與動畫實現 */
@keyframes my-a-name {
/* 動畫執行過程 */
0% {
right: 0;
}
25% {
right: -90%;
bottom: 0;
}
50%{
right: -90%;
bottom: -90%;
}
75%{
right: 0;
bottom: -90%;
}
to {
/* right: -500px; */
bottom: 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 調用css動畫時的屬性
(1)動畫名稱與執行時間“animation-name/animation-duration”
動畫名稱與執行時間這是執行動畫所必須的屬性，否則無法調用此動畫。
(2)動畫時間曲線“animation-timing-function”
和過渡時間曲線一樣。
(3)動畫時間的延遲“animation-delay”
和過渡時間的延遲一樣
(4)動畫播放的次數“animation-iteration-count”
它可以設置3種類型的值：
1（默認值）表示只執行1次動畫。
[number] 任意正整數，表示執行[numver]次動畫。
infinite表示在執行某事件後“無限次”執行動畫。
(5)動畫週期逆向播放“animation-direction”
默認動畫執行一次後會瞬間返回，然後我們可以設置此屬性用來讓他返回時也進行動畫，稱爲逆向動畫。
逆向動畫播放的進行時間和“正向播放”一致，時間速度曲線會按照“100%（to）”到“0%（from）”的方向進行。
normal 默認值。動畫應該正常播放。
alternate 動畫應該輪流反向播放。
注意：此屬性需要和animation-iteration-count動畫播放次數配合使用，因爲逆向播放也是執行一次動畫，所以想要讓逆向播放生效，播放次數最低要大於等於兩次。
如：animation-iteration-count:3;
animation-direction: alternate;
(6)動畫的播放和暫停“animation-play-state”
該屬性用於設置動畫的播放和暫停狀態，它有兩個值：
running 播放動畫。
paused 暫停動畫。
我們可以設置hover屬性來體驗動畫播放和暫停的效果
div:hover{
animation-play-state:paused;
}
(7)設定元素動畫形態“animation-fill-mode”
默認情況，動畫執行完成後會回到未執行動畫的初始狀態去，那麼有時候我們不想讓他又還原，我們就可以設置其動畫最終形態
這個屬性的可選值如下
backwards : 在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義，from或0%的狀態）
forwards: 讓元素執行動畫後不還原
both: 在動畫執行前保持from或0%的狀態，動畫執行完成後又保持動畫最後一刻的屬性。（100%或to哪一個的狀態）
(8)組合值的寫法“animation
animation:
name duration timing-function delay iteration-count direction fill-mode;