阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 animation中. 众所周知, 自从css3 加入了 3d硬件加速 就变的叼的一b 动画执行线程单独独立执行,使得我们触碰到了GPU这个神奇的东西, 性能一下子提高八度. 众多场景应用 微应用 营销活动 充斥在我们的朋友圈中. css3动画虽然 上手简单 随便都能搞一发 , 但是想要得心应手 运用自如还是需要 一定的深度的, 下拉我们来看下 我们需要 掌握 css3动画 中的那些能力.
串行动画
栗子 ： 我们有一个盒子,我希望它能够平移一段距离,然后旋转,缩放,渐隐掉.
1.逗号流(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 逗号分隔的特性来实现.这种写法非常独特的优势在与
- 代码可读性强
- 定义好的keyframes动画可以被复用,
- 保你分分钟内搞定一串动画
理想很美好,现实却是残酷的,运行上面的代码,我们发现动画并不是我们想象中的那样,只有slideRight能正常执行完成.
问题:
- slideRight 使用的是
-webkit-transform : translate(200px); - rotate360 使用的是
-webkit-transform : rotate(360deg); - lessen使用的是
-webkit-transform : scale(0.5);
当后一个动画的执行的时候 会覆盖掉前一个动画的transform.
我们后一个动画执行的时候 需要带上前一个动画的结束帧transform
如下解:
<pre>
@include keyframes (rotate360){
0%{
-webkit-transform : translate(200px) rotate(0deg);
}
100%{
-webkit-transform : translate(200px) rotate(360deg);
}
</pre>
2.标签流(label)
此法是为了解上述描述的弊端, 通过嵌套标签来实现动画
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>
动画执行的顺序是按照 标签的顺序来定的.
从translate 到 rotate 到 lessen 到 fadeOut. 比较完美,
但要注意动画的执行顺序和标签结构顺序要一致 !important
- 好处不用说,动画可复用.
- 结构清晰
- 复杂动画导致dom结构过深
PS : 使用标签流制作的时候 如果元素绝对定位的属性 请放在最外层标签上面
<p>
标签流的适用场景 适合简单轻快的动画
3.keyframes流
复杂型动画 这类动画基本不需要复用
<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预处理工具生成. 借助sass我们可以尽情的去使用这张王牌.
sass来执行
<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 流非常适合复杂的动画,它不具备 复用型,写法也够粗暴
- 复杂动画王牌
- 终极手段
- 复用差 一次性frames
复杂动画的王牌
3种流派 各有所长,我们在实际项目中需要灵活运用;
- 使用标签流完成 可复用的动画
- 制作单一复杂动画的时候,请选择王牌keyframes
- 适当使用逗号流也有奇效
实际项目案例
知了是一款k12的轻社交产品
http://imzhiliao.com
