css3过渡属性有几个属性值？

transform呈现的是一种变形结果，而transition呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

transition属性是一个简写属性，用于设置四个过渡属性

transition-property ：指定要过渡的css属性

transition-duration： 指定完成过渡花费的时间

transition-timing-function： 指定速度效果的速度曲线

transition-delay：指定过渡效果何时开始

动画animation transition 属性

1、animation 属性是一个简写属性，用于设置动画属性：

animation-name：规定 @keyframes 动画的名称。

animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function：规定动画的速度曲线。默认是 "ease"。

animation-delay：规定动画何时开始。默认是 0

animation-iteration-count：规定动画被播放的次数。默认是 1。

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-fill-mode：规定对象动画时间之外的状态

2、 transition 属性

语法：transition:  property duration timing-function delay ; 默认值  all 0 ease 0

transition-property  指定CSS属性的name，transition效果

其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。

transition-duration  transition效果需要指定多少秒或毫秒才能完成

transition-timing-function  指定transition效果的转速曲线

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的 cubic-bezier曲线 。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

transition-delay  定义transition效果开始的时候

首先img外层结构上有盒子包裹

鼠标滑过的时候：hover

img {

    transform: scale(1.1, 1.1);放大

  }

本身img盒子上加过度效果transition: all 0.5s;

img的父级盒子加 overflow: hidden;

css3 transition和transform的应用

一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）

transition 过渡 作为一个复合属性

1.transition-property 指定可以过渡的属性

默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2.transition-duration 指过渡完成的时间

默认值为0s

3.transition-timing-function 过渡的动画类型

默认值为ease

ease 规定慢速开始，然后变快，之后慢速结束的过渡效果

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

linear 规定以相同速度开始至结束的过渡效果

cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值

4.transition-delay 延迟执行过渡的时间

默认值为0s

二、transform属性

transform 向元素应用2D或3D转换 只对block级元素生效

1.translate 位移

translateX() 在x轴上发生位移或者变形

translateY() 在y轴上发生位移或者变形

translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效

2.scale 缩放

scaleX() 设置在x轴上发生缩放

scaleY() 设置在y轴上发生缩放

scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体

3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针

rotateX（）设置沿x轴旋转

rotateY () 设置沿y轴旋转

4.skew 倾斜

skewX 绕x轴发生倾斜

skewY 绕y轴发生倾斜

skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反，常用于平行四边形图案

三、transform-origin: 设置旋转元素的基点位置

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。

但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

下面我们主要来看看其使用规则：

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;

top left | left top 等价于 0 0；

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%（默认值）

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

transition是什么意思

n. 转变；过渡

一、读音：英 [træn'zɪʃn]；美 [træn'zɪʃn]

二、例句：

Such a sudden transition must affect her.

这样的一个突然变化一定会影响她。

三、词汇搭配：

形容词：transitional；

副词：transitionally。

transition 属性：一个简写属性，用于设置四个过渡属性。

扩展资料

近义词：conversion

一、意思：

n. 转变；换算

二、读音：英 [kən'vɜːʃn]；美 [kən'vɜːrʒn]

三、例句：

He has undergone a religious conversion.

经历一次宗教信仰的转变。

四、词汇用法：

14世纪中期进入英语，直接源自法语的conversion，意为交换，转化。

（1）动词+：make a conversion 做改变；undergo a conversion 经历皈依

（2）形容词+：religious conversion 宗教皈依

（3）名词+：house conversion 房屋改装