陽(yáng)春三月,人好,物好,心情好. 差不多也是get新技能的時(shí)期. 作為一名能力者,我們將目標(biāo)鎖定到了css3 animation中. 眾所周知, 自從css3 加入了 3d硬件加速 就變的叼的一b 動(dòng)畫(huà)執(zhí)行線(xiàn)程單獨(dú)獨(dú)立執(zhí)行,使得我們觸碰到了GPU這個(gè)神奇的東西, 性能一下子提高八度. 眾多場(chǎng)景應(yīng)用 微應(yīng)用 營(yíng)銷(xiāo)活動(dòng) 充斥在我們的朋友圈中. css3動(dòng)畫(huà)雖然 上手簡(jiǎn)單 隨便都能搞一發(fā) , 但是想要得心應(yīng)手 運(yùn)用自如還是需要 一定的深度的, 下拉我們來(lái)看下 我們需要 掌握 css3動(dòng)畫(huà) 中的那些能力.
串行動(dòng)畫(huà)
栗子 ： 我們有一個(gè)盒子,我希望它能夠平移一段距離,然后旋轉(zhuǎn),縮放,漸隱掉.
1.逗號(hào)流(comma)
<pre>
-webkit-animation :
slideRight 1s ease 0s both,
rotate360 1s linear 0.8s forwards,
lessen 1s ease 1.8s forwards,
fadeOut 1s ease 2.8s forwards;
</pre>
借助animation 逗號(hào)分隔的特性來(lái)實(shí)現(xiàn).這種寫(xiě)法非常獨(dú)特的優(yōu)勢(shì)在與
- 代碼可讀性強(qiáng)
- 定義好的keyframes動(dòng)畫(huà)可以被復(fù)用,
- 保你分分鐘內(nèi)搞定一串動(dòng)畫(huà)
理想很美好,現(xiàn)實(shí)卻是殘酷的,運(yùn)行上面的代碼,我們發(fā)現(xiàn)動(dòng)畫(huà)并不是我們想象中的那樣,只有slideRight能正常執(zhí)行完成.
問(wèn)題:
- slideRight 使用的是
-webkit-transform : translate(200px); - rotate360 使用的是
-webkit-transform : rotate(360deg); - lessen使用的是
-webkit-transform : scale(0.5);
當(dāng)后一個(gè)動(dòng)畫(huà)的執(zhí)行的時(shí)候 會(huì)覆蓋掉前一個(gè)動(dòng)畫(huà)的transform.
我們后一個(gè)動(dòng)畫(huà)執(zhí)行的時(shí)候 需要帶上前一個(gè)動(dòng)畫(huà)的結(jié)束幀transform
如下解:
<pre>
@include keyframes (rotate360){
0%{
-webkit-transform : translate(200px) rotate(0deg);
}
100%{
-webkit-transform : translate(200px) rotate(360deg);
}
</pre>
2.標(biāo)簽流(label)
此法是為了解上述描述的弊端, 通過(guò)嵌套標(biāo)簽來(lái)實(shí)現(xiàn)動(dòng)畫(huà)
HTML
<pre>
<div class="translate ib animate">
<div class="rotate ib animate">
<div class="lessen ib animate">
<div class="fadeOut ib animate">
<div class="box"></div>
</div>
</div>
</div>
</div>
</pre>
CSS
<pre>
.translate {
-webkit-animation: slideRight 1s ease 0s both;
-ms-animation: slideRight 1s ease 0s both;
-moz-animation: slideRight 1s ease 0s both;
-o-animation: slideRight 1s ease 0s both;
animation: slideRight 1s ease 0s both; }
.rotate {
-webkit-animation: rotate360 1s linear 0.8s both;
-ms-animation: rotate360 1s linear 0.8s both;
-moz-animation: rotate360 1s linear 0.8s both;
-o-animation: rotate360 1s linear 0.8s both;
animation: rotate360 1s linear 0.8s both; }
.lessen {
-webkit-animation: lessen 1s ease 1.8s both;
-ms-animation: lessen 1s ease 1.8s both;
-moz-animation: lessen 1s ease 1.8s both;
-o-animation: lessen 1s ease 1.8s both;
animation: lessen 1s ease 1.8s both; }
.fadeOut {
-webkit-animation: fadeOut 1s ease 2.8s both;
-ms-animation: fadeOut 1s ease 2.8s both;
-moz-animation: fadeOut 1s ease 2.8s both;
-o-animation: fadeOut 1s ease 2.8s both;
animation: fadeOut 1s ease 2.8s both; }
</pre>
keyframes
這里為了便于顯示貼了sass的代碼
<pre>
@include keyframes(lessen){
0%{
-webkit-transform : scale(1);
}
100%{
-webkit-transform : scale(0.5);
}
}
@include keyframes(fadeOut){
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@include keyframes (rotate360){
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@include keyframes (slideRight){
0%{
-webkit-transform : translate(0);
}
100%{
-webkit-transform : translate(200px);
}
}
</pre>
動(dòng)畫(huà)執(zhí)行的順序是按照 標(biāo)簽的順序來(lái)定的.
從translate 到 rotate 到 lessen 到 fadeOut. 比較完美,
但要注意動(dòng)畫(huà)的執(zhí)行順序和標(biāo)簽結(jié)構(gòu)順序要一致 !important
- 好處不用說(shuō),動(dòng)畫(huà)可復(fù)用.
- 結(jié)構(gòu)清晰
- 復(fù)雜動(dòng)畫(huà)導(dǎo)致dom結(jié)構(gòu)過(guò)深
PS : 使用標(biāo)簽流制作的時(shí)候 如果元素絕對(duì)定位的屬性 請(qǐng)放在最外層標(biāo)簽上面
<p>
標(biāo)簽流的適用場(chǎng)景 適合簡(jiǎn)單輕快的動(dòng)畫(huà)
3.keyframes流
復(fù)雜型動(dòng)畫(huà) 這類(lèi)動(dòng)畫(huà)基本不需要復(fù)用
<pre>
@-webkit-keyframes kfc-ani {
0% {
-webkit-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1); }
33.33333% {
-webkit-transform: translate(200px) rotate(0deg) scale(1);
transform: translate(200px) rotate(0deg) scale(1);
-moz-transform: translate(200px) rotate(0deg) scale(1);
-ms-transform: translate(200px) rotate(0deg) scale(1); }
66.66667% {
-webkit-transform: translate(200px) rotate(360deg) scale(1);
transform: translate(200px) rotate(360deg) scale(1);
-moz-transform: translate(200px) rotate(360deg) scale(1);
-ms-transform: translate(200px) rotate(360deg) scale(1); }
100.0% {
-webkit-transform: translate(200px) rotate(360deg) scale(0.5);
transform: translate(200px) rotate(360deg) scale(0.5);
-moz-transform: translate(200px) rotate(360deg) scale(0.5);
-ms-transform: translate(200px) rotate(360deg) scale(0.5); }
}
</pre>
這代碼是否夠酸爽,以上都是由css預(yù)處理工具生成. 借助sass我們可以盡情的去使用這張王牌.
sass來(lái)執(zhí)行
<pre>
$keys :
(name : transform,value : translate(0px) rotate(0deg) scale(1),dur : 0s),
(name : transform,value : translate(200px) rotate(0deg) scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(0.5),dur : 1s);
.kfc-ani{
-webkit-animation : kfc-ani 4s ease 0s both;
}
@include kfc($keys,kfc-ani);
</pre>
keyframes 流非常適合復(fù)雜的動(dòng)畫(huà),它不具備 復(fù)用型,寫(xiě)法也夠粗暴
- 復(fù)雜動(dòng)畫(huà)王牌
- 終極手段
- 復(fù)用差 一次性frames
復(fù)雜動(dòng)畫(huà)的王牌
3種流派 各有所長(zhǎng),我們?cè)趯?shí)際項(xiàng)目中需要靈活運(yùn)用;
- 使用標(biāo)簽流完成 可復(fù)用的動(dòng)畫(huà)
- 制作單一復(fù)雜動(dòng)畫(huà)的時(shí)候,請(qǐng)選擇王牌keyframes
- 適當(dāng)使用逗號(hào)流也有奇效
實(shí)際項(xiàng)目案例
知了是一款k12的輕社交產(chǎn)品
http://imzhiliao.com
