精华内容
下载资源
问答
  • transition属性值

    2017-03-30 09:09:00
    一、transition-property: transition-property是用来指定当元素其中一个属性改变时执行...当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,id...

    一、transition-property:

    transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下:

    1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;

    2、length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;

    3、percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性;

    4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;

    5、number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;

    6、transform list:详情请参阅:《CSS3 Transform

    7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop

    8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility

    9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow

    10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image

    11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似

    12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化

    13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

    具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

     

    二、transition-duration:

    transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。著作权归作者所有。

    三、transition-timing-function:

    语法:

     transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 

    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-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

     

    综合上述我们可以给transition一个速记法:transition: <property> <duration> <animation type> <delay>如下图所示:

     

     

    相对应的一个示例代码:

    p {
      -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }

     

    转载于:https://www.cnblogs.com/songadmin/p/6644064.html

    展开全文
  • 一、对transition属性的认识 1、transition 属性是一个简写属性,可用于设置四个过渡属性:   transition-property 过渡效果的 CSS 属性的名称(height、width、opacity等)。 transition-duration 完成过渡效果...
  • transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.这个属性一般搭配:hover来使 下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是...
  • transition 属性是一个简写属性,用于设置四个过渡属性:transition-property transition...css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击...

    transition 属性是一个简写属性,用于设置四个过渡属性:transition-property transition-duration transition-timing-function transition-delay,希望文章能够帮助到各位。

    css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

    下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用

    语法:

    transition : [ || || || [, [ || || || ]]*

    transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

    一、transition-property:

    语法:

    transition-property : none | all | [ ] [ ',' ]*

    transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。当其值为none时,transition马上停止执行,当指定为all时,则元素产生任何属性值变化时都将执行transition效果,ident是可以指定元素的某一个属性值。其对应的类型如下:

    1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性;

    2、length: 真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性;

    3、percentage:真实的数字 如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性;

    4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性;

    5、number真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;

    6、transform list:详情请参阅:《CSS3 Transform》

    7、rectangle:通过x, y, width 和 height(转为数值)变换,如:crop

    8、visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility

    9、shadow: 作用于color, x, y 和 blur(模糊)属性,如:text-shadow

    10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image

    11、paint server (SVG): 只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似

    12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化

    13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化

    具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,当浏览器改变宽度时,并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

    二、transition-duration:

    语法:

    transition-duration : [, ]*

    transition-duration是用来指定元素 转换过程的持续时间,取值:为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的。

    三、transition-timing-function:

    语法:

    transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

    取值:

    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.

    cubic-bezier

    其他几个属性的示意图:

    transition-timing-function

    四、transition-delay:

    语法:

    transition-delay : [, ]*

    transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

    有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果,那么我们只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:transition-delay与transition-duration的值都是时间,所以要区分它们在连写中的位置,一般浏览器会根据先后顺序决定,第一个可以解析为时间的?P值为transition-duration第二个为transition-delay。如:

    a {

    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;

    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;

    -o-transition: background 0.5s ease-in,color 0.3s ease-out;

    transition: background 0.5s ease-in,color 0.3s ease-out;

    }

    如果你想给元素执行所有transition效果的属性,那么我们还可以利用all属性值来操作,此时他们共享同样的延续时间以及速率变换方式,如:

    a {

    -moz-transition: all 0.5s ease-in;

    -webkit-transition: all 0.5s ease-in;

    -o-transition: all 0.5s ease-in;

    transition: all 0.5s ease-in;

    }

    综合上述我们可以给transition一个速记法:transition: 如下图所示:

    transition-suji

    相对应的一个示例代码:

    p {

    -webkit-transition: all .5s ease-in-out 1s;

    -o-transition: all .5s ease-in-out 1s;

    -moz-transition: all .5s ease-in-out 1s;

    transition: all .5s ease-in-out 1s;

    }

    浏览器的兼容性:

    transition-browers

    因为transition最早是有由webkit内核浏览器提出来的,mozilla和opera都是最近版本才支持这个属性,而我们的大众型浏览器IE全家都是不支持,另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法,所以在应用transition时我们有必要加上各自的前缀,最好在放上我们W3C的标准写法,这样标准的会覆盖前面的写法,只要浏览器支持我们的transition属性,那么这种效果就会自动加上去:

    //Mozilla内核

    -moz-transition : [ || || || [, [ || || || ]]*

    //Webkit内核

    -webkit-transition : [ || || || [, [ || || || ]]*

    //Opera

    -o-transition : [ || || || [, [ || || || ]]*

    //W3C 标准

    transition : [ || || || [, [ || || || ]]*

    展开全文
  • transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说...描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。transition-timing
  • CSS transition属性不生效,没有效果

    千次阅读 2020-05-04 19:25:51
    CSS transition属性不生效,没有效果1、不生效2、生效3、效果展示 最近在学HTML+CSS,今天开始做第一个项目,其中需要实现图片缓慢平移的效果,老师教我们用transition来实现,但是我自己编写的时候,发现transition...

    CSS transition属性不生效,没有效果


    最近在学HTML+CSS,今天开始做第一个项目,其中需要实现图片缓慢平移的效果,老师教我们用transition来实现,但是我自己编写的时候,发现transition并没有效果。研究一番之后发现,需要给属性添加一个初值才能够激发属性transition。

    1、不生效

    .header .logo a{
    	position: absolute; /*开启绝对定位*/
    	display: block;
    	width: 55px;
    	height: 55px;
    	background-color: #FF6700;
    	background-image: url(../img/02-小米logo.png); /*把超链接的背景设置为logo图片*/
    	background-position: center; /*居中*/
    	transition: left 3s; /*过渡动画*/
    }
    
    .header .logo:hover .mi{
    	left: 55px;/*logo往右移*/
    }
    

    刚开始这样写,当我把光标移入到超链接的时候,logo图片(超链接背景)并没有按3s缓慢向右移动,也就是transition属性没有生效。

    2、生效

    后来我给超链接添加了left初值之后,logo图片缓慢移动,transition生效。

    .header .logo a{
    	position: absolute; /*开启绝对定位*/
    	display: block;
    	width: 55px;
    	height: 55px;
    	background-color: #FF6700;
    	background-image: url(../img/02-小米logo.png); /*把超链接的背景设置为logo图片*/
    	background-position: center; /*居中*/
    	transition: left 3s; /*过渡动画*/
    }
    
    .header .logo .mi{
    	left: 0px;
    }
    .header .logo:hover .mi{
    	left: 55px;/*logo往右移*/
    }
    

    3、效果展示

    移动前面:
    移动前
    移动后:
    移动后

    展开全文
  • CSS中的transition属性可用于调整元素更改的时间,它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果,但是有时候可能会出现无效的情况,所以我们就需要来理解transition属性的写法规则。我们先来...

    CSS中的transition属性可用于调整元素更改的时间,它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果,但是有时候可能会出现无效的情况,所以我们就需要来理解transition属性的写法规则。

    我们先来看一下CSS中transition属性不起作用的原因

    transition是一种允许您指定更改时间等的属性。

    当用于设置鼠标光标放在按钮上时颜色和大小更改的时间时,它可以有像动画一样的效果。

    transition格式如下

    选择器名称{

    transition-property:value;

    }

    可指定的值是:

    all:您可以指定适用于转换的所有属性。

    none:没有属性发生变化。

    属性名称:指定要应用转换的属性名称。可以通过逗号指定多个。

    transition不起作用的许多原因通常是描述悬停事件的转换,所以要多加注意

    因为可以实现动画运动,所以有些效果使用transition属性很容易实现。

    下面我们来看看transition属性的具体用法

    如上述所说,不要在悬停事件中使用transition属性。

    HTML

    文字内容

    文字内容

    文字内容

    文字内容

    文字内容

    文字内容

    CSS

    p {

    width:100px;

    background-color:red;

    transition-duration: 2s;

    transition-property:width;

    }

    p:hover {

    width:420px;

    background-color:blue;

    }

    当鼠标没有放在上面的时候,浏览器上显示效果如下

    当鼠标放到红色背景上面的时候,浏览器上显示效果如下:

    p标签中指定了width : 100px和background-color:red;这样的话当宽度是100px时,背景是红色。下面指定了transition-duration: 2s;

    这样的话,transtion实现的效果从开始到结束的时间是2秒。

    最后是transition-property:width;应用transition属性的效果仅为width。

    :hover中指定width : 420px和background – color:blue,这样,移动鼠标到上面的时候,宽度变为420px,背景变为蓝色。

    如果鼠标悬停,宽度将为420px,背景将为蓝色,但过渡效果仅为宽度。2秒的变化只有宽度。由于转换效果不适用于指定背景颜色,因此只要将鼠标悬停在上面,它就会变为蓝色。

    展开全文
  • transition属性

    2021-06-01 21:35:27
    Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间
  • Transition属性详解

    千次阅读 2021-06-13 00:32:55
    Transition描述:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。"语法:transition : [ ||...
  • CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
  • css3 transition属性

    2021-08-04 04:35:29
    最近打算学习css3知识,觉得css3写出来的效果好炫...首先学习的是css3 transition属性,该属性的定义为从一个属性值平滑过渡到另一个属性值。格式为:transition: ,或transition-property:transition-duration:tr...
  • css中的transition属性

    2021-03-23 09:08:31
    css中的transition属性 定义 过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的...
  • transition属性和animation属性

    千次阅读 2018-09-06 09:54:28
    一、transition ...transition属性 属性可以分开写,也可以放在一起写,比如下面的代码,图片的宽高本来都是15px,想要让它1秒的时间内过渡到宽高为450px,通过:hover来触发,那么代码就可以...
  • transition属性的一些用法

    千次阅读 2019-06-24 11:05:03
    transition有四个 语法 transition: property duration timing-function delay; 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要...
  • transition属性包括以下四个:  •transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。 •transition-duration:指定属性过渡的...
  • CSS3中的transition属性详解

    千次阅读 2020-11-06 11:09:16
    transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数...
  • Transition属性主要是用来对某个CSS属性的变化过程进行控制,简单地理解即为”在某个时间段内,平滑地改变某个CSS属性。有了这个样式,以后再也不用写繁琐的JS来实现HOVER效果啦(当然,前提是IE支持的话,哈哈哈)!...
  • CSS transition属性

    2021-08-05 00:49:22
    以下介绍下transition属性,以及如何对非animatable,如display等的一些小技巧。属性1、transition-property: 指定要使用过渡效果的属性,比如宽度,高度或者透明度等。2、transition-duration: 指定变化所需的...
  • CSS使用过渡——transition属性

    千次阅读 2018-03-06 18:14:07
    浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。属性ChromeIEFirefoxSafariOperatransition26.04.0 -webkit-10...
  • 实例讲解: <style type="text/css"> div{ width:100px; height:100px; background:blue; transition-property: width; transition-duration: 2s; -moz-transition-property: width; /* Firefox...
  • CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点...
  • CSS3中的transition属性详解 一、语法 transition: property duration timing-function delay  transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 ...
  • CSS3 transition过渡属性的使用

    千次阅读 2020-01-26 16:20:57
    transition属性的使用详解,一步一步来,能学会的。
  • W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值...
  • CSS3 transition 属性

    2018-09-25 13:07:02
    初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416 语法 ...规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 tr...
  • css transition属性详解

    2015-08-09 17:31:22
    transition 已经被越来越多的应用在了移动端的网页展示,一期能达到原生app的动画效果.比如这个屏幕的滑动. 具体的属性详解可参考 http://www.w3chtml.com/css3/properties/transition/transition.html 四个属性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,847
精华内容 19,138
关键字:

transition的属性值