響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)戰(zhàn)(第2版)
第八章 CSS3過渡须教、變形和動(dòng)畫
- 過渡——transition
- 變形——transform
- 動(dòng)畫——animation
8.1什么是CSS3過渡以及如何使用它
- 當(dāng)元素的CSS狀態(tài)改變時(shí)，過渡是最簡單的創(chuàng)造視覺效果的方式。
- 如：我們在給超鏈接設(shè)置樣式的時(shí)候，一般都會(huì)設(shè)置一個(gè)懸停狀態(tài)的效果
- transition: box-shadow 1s;
- 在box-shadow上，將會(huì)耗時(shí)1秒臼氨，從現(xiàn)存狀態(tài)切換到懸停狀態(tài)。
8.1.1 過渡的簡寫語法
- 傾向使用縮寫版芭届，
- 這樣我只要定義過渡的時(shí)長和需要過渡的屬性即可储矩。
- transition: all 1s ease 0s;
- 第一個(gè)和時(shí)間相關(guān)的值會(huì)被應(yīng)用給transition-duration
- 第二個(gè)則會(huì)被應(yīng)用到transition-delay上
8.1.2 在不同時(shí)間段內(nèi)過渡不同屬性
- 多個(gè)屬性過渡時(shí)，這些屬性不必步調(diào)一致
.style {
/* ...（其他樣式）... */
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
8.1.3 過渡調(diào)速函數(shù)
- 貝塞爾曲線褂乍，本質(zhì)上是緩動(dòng)函數(shù)
- ease（默認(rèn)）椰苟、linear、ease-in树叽、ease-out舆蝴、ease-in-out和cubic-bezier
8.2 CSS的2D變形
- 過渡是從一種狀態(tài)平滑轉(zhuǎn)換到另一種狀態(tài)
- 變形則定義了元素將會(huì)變成什么樣子
- 想象一下《變形金剛》里的擎天柱，他通過變形來變成一部卡車。而在機(jī)器人與卡車之間的階段洁仗，我們稱之為過渡（從一個(gè)狀態(tài)過渡到另一個(gè)狀態(tài)）层皱。
- 變形是在文檔流外發(fā)生的
- 一個(gè)變形的元素不會(huì)影響它附近未變形的元素的位置。
8.2.1 scale
- 因?yàn)樽冃卧谖臋n流之外赠潦，所以如下設(shè)置的樣式變形叫胖，并不會(huì)導(dǎo)致同類位置的變動(dòng)
.scale:hover {
transform: scale(1.4);
}
8.2.2 translate
- translate會(huì)告知瀏覽器按照一定的度量值移動(dòng)元素，可以使用像素或者百分比
- 第一個(gè)值是X軸上偏移的距離
- 第二個(gè)是Y軸上偏移的距離
- 正值會(huì)讓元素向右或者向下移動(dòng)她奥，負(fù)值則會(huì)讓元素向左或者向上移動(dòng)瓮增。
.translate:hover {
transform: translate(-20px, -20px);
}
+ 如果你只傳入一個(gè)值，它會(huì)被應(yīng)用到X軸上哩俭。
+ 如果你想指定一個(gè)軸進(jìn)行移動(dòng)绷跑，可以使用translateX或者translateY。
.inner {
position: absolute;
width: 200px;
background-color: #999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
8.2.3 rotate
- rotate允許你旋轉(zhuǎn)一個(gè)元素
- 括號中的值只能以度為單位（如90deg）凡资。正值時(shí)會(huì)進(jìn)行順時(shí)針旋轉(zhuǎn)砸捏，而負(fù)值則會(huì)逆時(shí)針旋轉(zhuǎn)。
.rotate:hover {
transform: rotate(30deg);
}
8.2.4 skew
- skew（斜切）會(huì)讓元素在一個(gè)或者兩個(gè)軸上變形偏斜隙赁。
- 第一個(gè)值是X軸上的斜切（本例中是40度）
- 第二個(gè)值是Y軸上的斜切（本例中是12度）
- 忽略第二個(gè)值意味著僅有的值只會(huì)應(yīng)用在X軸上（水平方向）垦藏。
.skew:hover {
transform: skew(40deg, 12deg);
}
8.2.5 matrix
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
8.2.6 transform-origin屬性
- 在CSS里，默認(rèn)的變形原點(diǎn)（瀏覽器中作為變形中心的點(diǎn)）是在正中心：
- 元素X軸的50%和Y軸的50%處
- 這和SVG默認(rèn)的左上角（或者0 0）是不同的伞访。
- 使用transform-origin掂骏，我們可以修改變形原點(diǎn)
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;
}
8.3 CSS3的3D變形
- 使用perspective屬性來設(shè)置用戶視點(diǎn)到3D場景的距離。
- 結(jié)構(gòu):
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
.flipper {
perspective: 400px;
position: relative;
}
/* 我們將父元素設(shè)置為相對定位厚掷，從而創(chuàng)造一個(gè)上下文來放置flipper-object芭挽。 */
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
- 使用backface-visibility屬性把它設(shè)置為hidden來隱藏元素的背面
8.4 CSS3動(dòng)畫效果
- 相較于3D變形，CSS3動(dòng)畫的支持度更高蝗肪。
- 將在元素翻轉(zhuǎn)后為其添加脈沖動(dòng)畫效果袜爪。
- 這里只定義了一個(gè)簡單的關(guān)鍵幀選擇器：100%。
- 也可以設(shè)置多個(gè)關(guān)鍵幀選擇器（推薦你使用百分比）薛闪。你可以把它們想象成時(shí)間軸上的點(diǎn)辛馆。
@keyframes pulse {
100% {
text-shadow: 0 0 5px #bbb;
box-shadow: 0 0 3px 4px #bbb;
}
}
- 最好使用一個(gè)能代表動(dòng)畫效果的名字，因?yàn)橐粋€(gè)關(guān)鍵幀聲明可以在項(xiàng)目中多處復(fù)用豁延。
.flipper:hover .flipper-horizontal {
transform: rotateY(180deg);
animation: pulse 1s 1s infinite alternate both;
}
- animation-fill-mode屬性
- animation-fill-mode: forwards;
- 這指使元素保留動(dòng)畫結(jié)束時(shí)的值昙篙。
