transition動(dòng)畫(huà)
1甸昏、transition-property 設(shè)置過(guò)渡的屬性撇贺，比如：width height background-color
2谦疾、transition-duration 設(shè)置過(guò)渡的時(shí)間纷闺，比如：1s 500ms
3刨秆、transition-timing-function 設(shè)置過(guò)渡的運(yùn)動(dòng)方式
linear 勻速
ease 開(kāi)始和結(jié)束慢速
ease-in 開(kāi)始是慢速
ease-out 結(jié)束時(shí)慢速
ease-in-out 開(kāi)始和結(jié)束時(shí)慢速
cubic-bezier(n,n,n,n)
比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲線(xiàn)設(shè)置網(wǎng)站：https://matthewlein.com/ceaser/
4凳谦、transition-delay 設(shè)置動(dòng)畫(huà)的延遲
5、transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性
舉例：
<style type="text/css">? ? ? ?
.box{
? ? width:100px;
? ? height:100px;
? ? background-color:gold;
? ? transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;? ? ? ? ? ?
}
.box:hover{
? ? width:300px;
? ? height:300px;
? ? background-color:red;
}
</style>
......
<div class="box"></div>
transform變換
1衡未、translate(x,y) 設(shè)置盒子位移
2尸执、scale(x,y) 設(shè)置盒子縮放
3、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4缓醋、skew(x-angle,y-angle) 設(shè)置盒子斜切
5如失、perspective 設(shè)置透視距離
6、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7送粱、translateX褪贵、translateY、translateZ 設(shè)置三維移動(dòng)
8、rotateX脆丁、rotateY世舰、rotateZ 設(shè)置三維旋轉(zhuǎn)
9、scaleX槽卫、scaleY跟压、scaleZ 設(shè)置三維縮放
10、tranform-origin 設(shè)置變形的中心點(diǎn)
11歼培、backface-visibility 設(shè)置盒子背面是否可見(jiàn)
舉例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>翻面</title>
? ? <style type="text/css">
? ? ? ? .box{
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height:272px;
? ? ? ? ? ? margin:50px auto 0;
? ? ? ? ? ? transform-style:preserve-3d;
? ? ? ? ? ? position:relative;? ? ? ? ? ?
? ? ? ? }
? ? ? ? .box .pic{
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height:272px;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? background-color:cyan;
? ? ? ? ? ? left:0;
? ? ? ? ? ? top:0;
? ? ? ? ? ? transform:perspective(800px) rotateY(0deg);
? ? ? ? ? ? backface-visibility:hidden;
? ? ? ? ? ? transition:all 500ms ease;
? ? ? ? }
? ? ? ? .box .back_info{
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height:272px;
? ? ? ? ? ? text-align:center;
? ? ? ? ? ? line-height:272px;
? ? ? ? ? ? background-color:gold;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? left:0;
? ? ? ? ? ? top:0;
? ? ? ? ? ? transform:rotateY(180deg);
? ? ? ? ? ? backface-visibility:hidden;
? ? ? ? ? ? transition:all 500ms ease;? ? ? ? ? ?
? ? ? ? }
? ? ? ? .box:hover .pic{
? ? ? ? ? ? transform:perspective(800px) rotateY(180deg);
? ? ? ? }
? ? ? ? .box:hover .back_info{
? ? ? ? ? ? transform:perspective(800px) rotateY(0deg);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">? ? ? ?
? ? ? ? <div class="pic"><img src="images/location_bg.jpg"></div>
? ? ? ? <div class="back_info">背面文字說(shuō)明</div>
? ? </div>
</body>
</html>
animation動(dòng)畫(huà)
1震蒋、@keyframes 定義關(guān)鍵幀動(dòng)畫(huà)
2、animation-name 動(dòng)畫(huà)名稱(chēng)
3丐怯、animation-duration 動(dòng)畫(huà)時(shí)間
4喷好、animation-timing-function 動(dòng)畫(huà)曲線(xiàn)
linear 勻速
ease 開(kāi)始和結(jié)束慢速
ease-in 開(kāi)始是慢速
ease-out 結(jié)束時(shí)慢速
ease-in-out 開(kāi)始和結(jié)束時(shí)慢速
steps 動(dòng)畫(huà)步數(shù)
5、animation-delay 動(dòng)畫(huà)延遲
6读跷、animation-iteration-count 動(dòng)畫(huà)播放次數(shù) n|infinite
7、animation-direction
normal 默認(rèn)動(dòng)畫(huà)結(jié)束不返回
Alternate 動(dòng)畫(huà)結(jié)束后返回
8禾唁、animation-play-state 動(dòng)畫(huà)狀態(tài)
paused 停止
running 運(yùn)動(dòng)
9效览、animation-fill-mode 動(dòng)畫(huà)前后的狀態(tài)
none 不改變默認(rèn)行為
forwards 當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）
backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)荡短，在動(dòng)畫(huà)顯示之前丐枉，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）
both 向前和向后填充模式都被應(yīng)用
10、animation:name duration timing-function delay iteration-count direction;同時(shí)設(shè)置多個(gè)屬性
舉例：（人物走路動(dòng)畫(huà)）
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>走路動(dòng)畫(huà)</title>
? ? <style type="text/css">? ? ? ?
? ? ? ? .box{
? ? ? ? ? ? width:120px;
? ? ? ? ? ? height:180px;
? ? ? ? ? ? border:1px solid #ccc;? ? ? ? ? ?
? ? ? ? ? ? margin:50px auto 0;
? ? ? ? ? ? position:relative;
? ? ? ? ? ? overflow:hidden;? ? ? ? ? ?
? ? ? ? }
? ? ? ? .box img{
? ? ? ? ? ? display:block;
? ? ? ? ? ? width:960px;
? ? ? ? ? ? height:182px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left:0;
? ? ? ? ? ? top:0;
? ? ? ? ? ? animation:walking 1.0s steps(8) infinite;? ? ? ? ? ?
? ? ? ? }
? ? ? ? @keyframes walking{
? ? ? ? ? ? from{
? ? ? ? ? ? ? ? left:0px;
? ? ? ? ? ? }
? ? ? ? ? ? to{
? ? ? ? ? ? ? ? left:-960px;
? ? ? ? ? ? }
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box"><img src="images/walking.png"></div>
</body>
</html>
