失眠网 > CSS过渡变形及动画

CSS过渡变形及动画

时间：2019-05-20 19:57:18

相关推荐

CSS过渡变形及动画

一、过渡（transition）

1、CSS过渡的概念

CSS 过渡是指在设置的时间内来平滑的改变属性值，和动画animation有类似效果，但是细节上有很大不同。

2、transition相关属性

①transition-property属性

用于指定应用过渡效果的CSS属性的名称。基本语法格式：

transition-property: none | all | property;

属性值 none：没有属性会获得过渡效果。all：所有属性都将获得过渡效果。property：定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。

②transition-duration属性

用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式：

transition-duration:time;

③transition-timing-function属性

规定过渡效果的速度曲线，默认值为“ease“。基本语法格式：

属性值 ease：指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)。linear：指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1))。ease-in：指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1)。ease-out：指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1)。ease-in-out：指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1)。cubic-bezier(n,n,n,n)：定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。

④transition-delay属性

规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式：

transition-delay:time;

正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。

⑤transition属性

是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。基本语法格式：

transition：property duration timing-function delay;

注意：使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

3、CSS过渡的简单实例

代码如下：

二、变形（transform）

1、CSS变形的概念

CSS 变形用于对元素进行旋转、缩放、移动或倾斜，和动画animation没什么关系，主要是设置元素的“外表”。基本语法格式：

transform：none | transform-functions;

transform-function函数 matrix（）：定义矩形变换，即基于X和Y坐标重新定位元素的位置。translate（）：移动元素对象，即基于X和Y坐标重新定位元素。 scale（）：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。 rotate（）：旋转元素对象，取值为一个度数值。 skew（）：倾斜元素对象，取值为一个度数值。

2、2D转换

①平移

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。基本语法格式：

transform:translate(x-value,y-value);

x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。

②缩放

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。基本语法格式：

transform:scale(x-axis,y-axis);

x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。

③倾斜

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。基本语法格式：

transform:skew(x-angle,y-angle);

参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。

④旋转

rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。基本语法格式：

transform:skew(x-angle,y-angle);

参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。

3、3D转换

①rotateX()

rotateX()函数用于指定元素围绕X轴旋转。基本语法格式：

transform:rotateX(a);

参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。

②rotateY()

rotateY()函数指定一个元素围绕Y轴旋转。基本语法格式：

transform:rotateY(a);

参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。

③rotate3D()

在三维空间里，除了rotateX()、rotateY()和rotateZ()函数可以让元素在三维空间中旋转之外，还有一个rotate3d()函数。基本语法格式：

rotate3d(x,y,z,angle);

x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

④perspective属性

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。基本语法格式：

perspective:参数值;

perspective属性参数值可以为none或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。

4、CSS变形的简单实例

代码如下：

浏览器效果可以自己看一下。

三、过渡和变形的区别

①过渡用到的属性是transition，而变形用到的属性是transform。

②过渡是指元素变化的整个过程，更加强调期间经过的过程；而变形是指从一种形状变为另一种形状，更加强调变化前后的区别。例如树苗成为参天大树是变形（transform），而小树苗在长成参天大树这期间的过程就是过渡（transition）。换言之，过渡是针对元素的属性进行的改变，而变形是针对整个元素进行的改变。

③过渡变化的中心点默认是对象的左上角，不能改变；而变形能够设置对象的中心点。

④过渡可以设置过渡时间、曲线以及延迟等；而变形不能设置这些参数，变形是瞬间完成的变化。

四、动画（animation）

1、CSS动画的概念

CSS 动画是CSS动画属性，CSS可以直接实现HTML元素的动画效果，而不是用JavaScript或者Flash。

2、animation相关属性

①@keyframes

在CSS3中，@keyframes规则用于创建动画。基本语法格式：

@keyframes animationname {keyframes-selector{css-styles;}}

animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

②animation-name属性

用于定义要应用的动画名称。基本语法格式：

animation-name: keyframename | none;

animation-name 属性初始值为none，适用于所有块元素和行内元素。keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画。

③animation-duration属性

用于定义整个动画效果完成所需要的时间，以秒或毫秒计。基本语法格式：

animation-duration: time;

animation-duration 属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。

④animation-timing-function属性

用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。基本语法格式：

animation-timing-function:value;

animation-timing-function包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。