10分钟入门CSS3 Animation

简介

Animation可以让你不用依赖javascript或jquery,用纯CSS在网页中轻松实现各种动画效果。

兼容性

animation在绝大部分主流浏览器都得到了很好的支持!还在兼容IE9的同学要谨慎使用。

CSS 坐标系

在了解animtion之前,我们有必要先了解css的坐标系,因为很多的animation效果都和元素的坐标密切相关。在css3中网页不再是一个二维平面,而是一个三维空间,水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x,y,z轴,如下图所示。箭头方向为正向,反之为负向(注意y轴方向与常规笛卡尔坐标系相反)。

Animations

1. Transforms

transform中文译为“转换”,但我更倾向于称呼它“变形”(大名鼎鼎的变形金刚叫transformer)。我们可以使用transform function使html元素产生各种各样的变形,比如平移、缩放、旋转、扭曲等,而且不会影响正常的文档流(document flow)。

(1) Translate

Translate一般译为“翻译”,但在css里面一般用作“平移”,因为translate用于改变html元素的在3d坐标系位置。translate支持在坐标系内任意方向移动(通过任意组合x、y、z方向的向量),单位可以是长度单位和百分比(百分比是相对于被平移的元素自身尺寸,x轴是相对于width,y轴是相对于height,而在z轴方向由于元素是没有‘厚度’的,所以对于z方向不能用百分比表示),例如:

transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者简写
transform: translate3d(100px, 50%, 2em);

注意:

translate是xy平面内的2维平移,translate3d是xyz空间内的三维平移;

translate也可以单独书写,如 translate: 50% 105px 5rem;,但是该特性尚在实验阶段,很多浏览器不支持,所以现阶段还是配合transform使用。详情参考MDN translate。

(2) Scale

Scale意为“缩放”,顾名思义,是用于改变元素的大小。例如:

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者简写
transform: scale3d(2, 0.5, 1);

scale方法接收任意数字(正负整数、小数、0)作为参数,该参数为缩放系数,系数>1 效果为放大,0<系数<1 效果为缩小,系数=0 元素尺寸变为无限小而不可见,系数<0 效果为 >0 时的镜像(具体效果可自己实验)。

translate类似,scale也有2维 scale() 和三维 scale3d()之分,也可以单独书写,此处不赘述。

(3) Rotate

Rotate意为“旋转”,支持将元素以x、y、z为轴旋转,旋转正方向为面朝坐标轴正向逆时针方向,可参考上面坐标系示意图。rotate方法接收一个角度作为参数,角度>0 正向旋转,角度<0 负向旋转,例如:

// 默认绕z轴旋转
transform: rotate(90deg);
transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

与translate和scale不同,rotate不能简写为transform: rotate3d(30deg, 60deg, 90deg)的形式,rotate3d的用法为:前三个参数为数字,代表x、y、z方向的向量,相加得到向量v,第四个参数为角度,表示以向量v为轴逆时针旋转的角度,语法如下:

transform: rotate3d(1, 2, 3, 90deg);

translatescale类似,rotate也可以作为单独的css属性,但还在实验阶段。

出于篇幅考虑,我只列出三种最常用的tranform function,剩下的transform function请参考 MDN transform function。

(4) 组合

我们可以将不同的transform方法组合起来使用,如:

transform: translateY(200px) rotateZ(90deg) scale(3);

组合方法的执行顺序是从右往左,即先执行scale,然后rotate,最后translate,产生的效果是逐次累加的。方法书写的顺序对最后效果有很大的影响,看下面例子,沿y轴平移和放大,顺序不同,产生的结果有明显差别:

10分钟入门CSS3 Animation

扫一扫手机访问