手写CSS3动画的几种流派

阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 animation中. 众所周知, 自从css3 加入了 3d硬件加速就变的叼的一b 动画执行线程单独独立执行,使得我们触碰到了GPU这个神奇的东西, 性能一下子提高八度. 众多场景应用微应用营销活动充斥在我们的朋友圈中. css3动画虽然上手简单随便都能搞一发 , 但是想要得心应手运用自如还是需要一定的深度的, 下拉我们来看下我们需要掌握 css3动画中的那些能力.

源码git

以下部分saas函数代码可在源码中查看
https://github.com/sherlock22...

为了保证兼容性使用saas抽象部分函数:

@charset "utf-8";
/**
 * sherlock221b
 * 动画部分常用
 */


//transform 兼容
@mixin transform($value) {
  -webkit-transform: $value;
  transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
}

//transition 兼容
@mixin transition($value) {
  -webkit-transition: $value;
  transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
}

//animation 兼容
@mixin animation($animationName) {
  -webkit-animation: $animationName;
  -ms-animation: $animationName;
  -moz-animation: $animationName;
  -o-animation: $animationName;
  animation: $animationName;
}


//key frames 兼容
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }

  @-ms-keyframes #{$animationName} {
    @content;
  }

  @keyframes #{$animationName} {
    @content;
  }
}

//animate mode 兼容
@mixin  animation-mode($mode){
  -webkit-animation-fill-mode: $mode !important;
  -moz-animation-fill-mode: $mode !important;
  -ms-animation-fill-mode: $mode !important;
  animation-fill-mode: $mode !important;
}

正文

栗子：我们有一个盒子,我希望它能够平移一段距离,然后旋转,缩放,渐隐掉.

逗号流(comma)


-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;

借助animation 逗号分隔的特性来实现.这种写法非常独特的优势在与

代码可读性强
定义好的keyframes动画可以被复用,
保你分分钟内搞定一串动画

理想很美好,现实却是残酷的,运行上面的代码,我们发现动画并不是我们想象中的那样,只有slideRight能正常执行完成.

问题:

slideRight 使用的是 -webkit-transform : translate(200px);
rotate360 使用的是 -webkit-transform : rotate(360deg);
lessen使用的是 -webkit-transform : scale(0.5);

当后一个动画的执行的时候会覆盖掉前一个动画的transform.
我们后一个动画执行的时候需要带上前一个动画的结束帧transform

如下解:


@include keyframes (rotate360){
  0%{
    -webkit-transform : translate(200px) rotate(0deg);
  }

  100%{
    -webkit-transform : translate(200px) rotate(360deg);
  }

标签流(label)

此法是为了解上述描述的弊端, 通过嵌套标签来实现动画

HTML

CSS

.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; }   
  
  .ib{
  display: inline-block;
}
.animate{
  -webkit-animation-play-state:paused !important;
  animation-play-state:paused !important;
}
.active .animate {
  -webkit-animation-play-state:running !important;
  animation-play-state:running !important;
}

keyframes

这里为了便于显示贴了sass的代码

@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);
  }
}

动画执行的顺序是按照标签的顺序来定的.
从translate 到 rotate 到 lessen 到 fadeOut. 比较完美,
但要注意动画的执行顺序和标签结构顺序要一致 !important

好处不用说,动画可复用.
结构清晰
复杂动画导致dom结构过深

PS : 使用标签流制作的时候如果元素绝对定位的属性请放在最外层标签上面

标签流的适用场景适合简单轻快的动画

keyframes流

复杂型动画这类动画基本不需要复用

@-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); }
}

这代码是否够酸爽,以上都是由css预处理工具生成. 借助sass我们可以尽情的去使用这张王牌.

sass来执行

$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);

keyframes 流非常适合复杂的动画,它不具备复用型,写法也够粗暴

复杂动画王牌
终极手段
复用差一次性frames

复杂动画的王牌

3种流派各有所长,我们在实际项目中需要灵活运用;

使用标签流完成可复用的动画
制作单一复杂动画的时候,请选择王牌keyframes
适当使用逗号流也有奇效

实际项目案例

知了是一款k12的轻社交产品
http://imzhiliao.com