Mather

We create our own demons.

从 Animate.css 学习编写 CSS 动画

默认分类 0 评


Animate.css


是由旧金山设计师 Daniel Eden 编写好包含CSS动画属性的库文件。


CSS3 Animation 属性

来看看属于 animations 的CSS属性及其初始值有哪些:

    animation-name: none
    //动画名,在用@keyframes定义一组动画的时候命的动画名。
    animation-duration: 0s
    //动画周期的时长
    animation-timing-function: ease
    //动画运动的节奏(数学函数)
    animation-delay: 0s
    //动画开始的时间点
    animation-iteration-count: 1
    //动画运行结束前运行的次数
    animation-direction: normal
    //动画播放方向,正反等
    animation-fill-mode: none
    //动画执行完时,元素显示执行前或执行后的样式
    animation-play-state: running
    //动画的执行状态

好的有了这些属性的基础知识我们来看看 Animate.css 是如何做出生动的动画的。
以下是 animate.css 源码,由Gulp 合并各样式文件得到:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated 类设置了动画播放时时长为 1 秒, 显示执行后的样式。


.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.infinite 类设置了该动画无限循环。

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.hinge 类设置了动画播放时长为 2 秒。


.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut
类分别设置了动画播放时长为 0.75 秒。

文件头几个样式只是设置了 动画的播放时长、是否循环、执行后显示的样式。
所以,在使用时至少为元素加入以上几种 .animated 类,设置动画的一些基础属性。

keyframes 关键帧语法

接下来来看一组的关键帧,下面省略了浏览器私有属性@-webkit-keyframes 的样式,实际生产中请加上该浏览器私有前缀。

@-webkit-keyframes bounce {
/*same with @keyframes bounce */
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

定义在动画时长内, 各个阶段 0% 20% 53% 80% 100% 时关键帧的样式 :
cubic-bezier(0.215, 0.610, 0.355, 1.000)transform: translate3d(0,0,0)

暂时忽略动画曲线的效果,会容易理解整个动画的过程
尝试将 cubic-bezier 内四个参数填入 cubic-bezier.com 的地址栏,便会绘制当前曲线,该条曲线动画效果:

http://cubic-bezier.com/#.21,.61,.35,1

为了尝试详细地观察两个关键帧的运动方式,可以将下文 70% 90% 阶段的样式注释掉,并把动画时长设定为 10秒。

-webkit-animation-duration: 10s;
animation-duration: 10s;

0% 20%时间段内,由translate3d(0,0,0)可知,元素的位置都在原点,这就是10秒钟的前2秒这元素的位置看起来并没有变化的原因。仅有这一组关键帧还不能组成动画。

来看看动画效果(前2~4秒):


下一组关键帧效果:

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  

这里transform变换属性 translate3d(0, -30px, 0),动画效果会使元素往上30个像素。
translate3d 三个参数 0 -30px 0分别对应页面的 X Y Z轴,
浏览器页面竖直往下为 X的正半轴, 水平往右为 Y的正半轴, 垂直于页面向观察者方向为 Z的正半轴。

这时候时间段从20%~40%,应用了translate3d(0, -30px, 0)样式变换,20%动画时长该元素将会上移30像素,按时长10秒计算有2秒的时间会处于上升状态。
来看看动画效果(前4秒):

可见,红色矩形前2秒是固定不动,再往后2秒时间上升了30像素,至于上升的快慢则由cubic-bezier(0.755, 0.050, 0.855, 0.060)决定。


剩下的两个关键帧:

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

组合动画

值得注意的是,关键帧 @keyframes bounce 内共定义了 4 个具体的关键帧,百分比分别对应时间段

  • 0% → 20% → 40% → 43% → 53% → 70% → 80% → 90% → 100%
  • 0% → 20% 2秒 translate3d(0,0,0)
  • 20% → 40% 2秒 translate3d(0, -30px, 0) 应用 cubic-bezie 且上移30px
  • 40% → 43% 0.3秒 上移30px后保持0.3秒
  • 43% → 53% 1秒 translate3d(0,0,0) 回落到0px位置
  • 53% → 70% 1.7秒 translate3d(0, -15px, 0) 应用 cubic-bezie 且上移15px
  • 70% → 80% 1秒 translate3d(0,0,0) 回落到0px位置
  • 80% → 90% 1秒 translate3d(0, -4px, 0) 应用 cubic-bezie 且上移4px
  • 90% → 100% 1秒 translate3d(0,0,0) 回落到0px位置

定义关键帧的好处在于,可以描述出元素一系列的位置或形状的变化,以及变化的节奏。


.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

bounce类定义了使用的 @keyframes 是上文的 @keyframes bounce
transform-origin则属性定义了选取该元素内哪一个位置的点作为位置或形状的变换原点。
第一个参数为 横坐标 第二参数为 纵坐标, 结合来指示元素的变换原点。

最后,来连贯地看一遍动画,动画周长已缩减回1秒:

IFE 春季第一阶段任务总结

发表评论
撰写评论