过渡:transition
transition
的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
-
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
-
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
transition 属性
-
transition-property: all;
如果希望所有的属性都发生过渡,就使用all。 -
transition-duration: 1s;
过渡的持续时间。 -
transition-timing-function: linear;
运动曲线。属性值可以是:linear
线性ease
减速ease-in
加速ease-out
减速ease-in-out
先加速后减速
-
transition-delay: 1s;
过渡延迟。多长时间后再执行这个过渡动画。
综合属性(简写)
-
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
-
transition: all 3s linear 0s;
-
如果设置
transition-property: width
,意思是只让盒子的宽度在变化时进行过渡。 -
如果设置
transition-property: all
,意思是让盒子的所有属性(包括宽度、背景色等)在变化时都进行过渡。
2D 转换
转换是 CSS3 中具有颠覆性的一个特征,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式。
转换再配合过渡和动画,可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中,通过 transform
转换来实现 2D 转换或者 3D 转换。
- 2D转换包括:缩放、移动、旋转。
我们依次来讲解。
1、缩放:scale
格式:
-
transform: scale(x, y);
-
transform: scale(2, 0.5);
参数解释: x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值:大于1表示放大,小于1表示缩小。不能为百分比。
2、位移:translate
格式:
-
transform: translate(水平位移, 垂直位移);
-
transform: translate(-50%, -50%);
参数解释:
-
参数为百分比,相对于自身移动。
-
正值:向右和向下。 负值:向左和向上。如果只写一个值,则表示水平移动。
3、旋转:rotate
格式:
-
transform: rotate(角度);
-
transform: rotate(45deg);
参数解释:正值 顺时针;负值:逆时针。
3D 转换
1、旋转:rotateX、rotateY、rotateZ
2、移动:translateX、translateY、translateZ
3、透视:perspective
电脑显示屏是一个 2D 平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。但仅仅只是视觉呈现出3d 效果,并不是正真的3d。
格式有两种写法:
-
作为一个属性,设置给父元素,作用于所有3D转换的子元素
-
作为 transform 属性的一个值,做用于元素自身。
4、3D呈现(transform-style)
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d
来使其变成一个真正的3D图形。属性值可以如下:
-
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内(子盒子被扁平化)
动画
动画是CSS3中具有颠覆性的特征,可通过设置多个节点 来精确控制一个或一组动画,常用来实现复杂的动画效果。
1、定义动画的步骤
(1)通过@keyframes定义动画;
(2)将这段动画通过百分比,分割成多个节点;然后各节点中分别定义各属性;
(3)在指定元素里,通过 animation
属性调用动画。
animation属性的格式如下:
-
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
2、动画属性
我们刚刚在调用动画时,animation属性的格式如下:
animation属性的格式如下:
-
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
1)动画名称:
animation-name: move;
(2)执行一次动画的持续时间:
animation-duration: 4s;
备注:上面两个属性,是必选项,且顺序固定。
(3)动画的执行次数:
animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite
表示无数次。
(3)动画的方向:
animation-direction: alternate;
属性值:normal 正常,alternate 反向。
(4)动画延迟执行:
animation-delay: 1s;
(5)设置动画结束时,盒子的状态:
animation-fill-mode: forwards;
属性值: forwards:保持动画结束后的状态(默认), backwards:动画结束后回到最初的状态。
(6)运动曲线:
animation-timing-function: ease-in;
属性值可以是:linear ease-in-out steps()等。
如果把属性值写成steps()
,则表示动画不是连续执行,而是间断地分成几步执行。