transition属性值

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、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>)]* 

Jetbrains全家桶1年46,售后保障稳定

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属性值

其他几个属性的示意图:

transition属性值

 

四、transition-delay:

 

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

 

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

 

transition属性值

 

相对应的一个示例代码:

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219985.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • VMWare 安装Ubuntu 16.04

    VMWare 安装Ubuntu 16.041、新建虚拟机(1)点击文件–>新建虚拟机(2)选择自定义(高级)–> 下一步(3)选择Workstation12.0 –> 下一步(

  • pycharm 内部环境变量修改

    pycharm 内部环境变量修改今天在在更新adb时,因为换了个新文件夹,在cmd中运行正常,但是在pycharm中adb还是在运行旧位置的adb程序,然后去问了一下同事,发现是因为win系统的环境变量虽然改变了,但是pycharm内部的环境变量未更改,所以导致还是执行的原来的旧程序。下面将记录如何修改pycharm的环境变量。1.点击File-Settings2.点击Tools-Terminal进入如下界面3.点击红框图标查看pycharm环境变量配置…

  • python破解wifi(暴力破解wf)

    自己家的网路实在是差劲的一批…然后电脑打开WiFi,发现了有及格信号还蛮不错的WiFi,于是…就开始了愉快的Python之旅~~~主要步骤获取第一个无线网卡断开断开所有的wifi读取密码本设置睡眠时间fromtkinterimport*frompywifiimportconstimportpywifiimporttime#主要步骤:#1、获取第一个无线网卡#2、断开所有的wifi#3、读取密码本#4、设置睡眠时间#测试连接defwi

  • php 判断是否对象_php怎么判断对象是否为空

    php 判断是否对象_php怎么判断对象是否为空PHP中判断一个变量是否为空,有多种办法,下面分别来看一下1.isset功能:判断变量是否被初始化说明:它并不会判断变量是否为空,并且可以用来判断数组中元素是否被定义过注意:当使用isset来判断数组元素是否被初始化过时,它的效率比array_key_exists高4倍左右。2.empty功能:检测变量是否为”空”说明:任何一个未初始化的变量、值为0或false或空字符串””或nu…

  • mongodb与MySQL的不同_Mongodb与MySQL之间的比较分析

    mongodb与MySQL的不同_Mongodb与MySQL之间的比较分析本篇文章给大家带来的内容是关于Mongodb与MySQL之间的比较分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。在数据库存放的数据中,有一种特殊的键值叫做主键,它用于惟一地标识表中的某一条记录。也就是说,一个表不能有多个主键,并且主键不能为空值。无论是MongoDB还是MySQL,都存在着主键的定义。对于MongoDB来说,其主键名叫”_id”,在生成数据的时候,如果用户不主…

  • Windows 8系统中***客户端812错误的解决方法

    Windows 8系统中***客户端812错误的解决方法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号