transition过度属性

transition：用于设置DOM元素在不同状态之间切换的时候应用不同的过度效果，以前如果要想实现一个非生硬的状态切换需要写很多的js来实现，现在使用transition变可以轻松的实现。

1、transition-property：

property：表示属性的意思，这里用来设置元素要过度的css属性名。

基本语法：
transition: none | all | property;

none：表示没有任何过度效果。
all：初始值，表示所有的能过度属性都有过度效果。
property：指定一个或多个属性名称执行过度效果，多个css属性名之间用逗号分隔开。

例如：

    transition-property: width;
    transition-property: window, height, background-color, opacity;
    transition-property: all;

兼容性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cUeW4yrr-1578224041792)(https://note.youdao.com/yws/api/personal/file/06E0D762CE3F40EDB63CA81738A83C46?method=getImage&version=6277&cstk=vVYJ3tdX)]
查看兼容性详情

查看案例Demo

能够支持过度的css属性查看1，查看2

2、transition-duration

transition-duration：表示过渡动画在多长时间内执行完毕。值以秒（s）或毫秒（ms）为单位不接受负值。可以指定多个值，每个值之间用逗号分开并且分别应用到 transition-property 指定的对应属性上。

基本语法：
transition-duration: time;

time：指定动画执行时长。

例如：

    transition-duration: 10s;
    transition-duration: .5s, 10ms, .9ms, 0.5s, 10.05s; //如果是小数点左边只有一个0的话，前边的 0可以省略。

兼容性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fiJZplym-1578224041793)(https://note.youdao.com/yws/api/personal/file/875770FF91C54611817571CC28674D77?method=getImage&version=6436&cstk=b1aBImfQ)]
查看兼容性详情

查看案例Demo

3、transition-timing-function

transition-timing-function：指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

ease：慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,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)）。
linear：以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
steps(4, end)：四次运动到结束执行过度效果。
cubic-bezier(x1, y1, x2, y2)：以贝塞尔函数算法执行过度效果。生成贝塞尔曲线网站：website1、website2、website

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qNi1fB7J-1578224041794)(https://note.youdao.com/yws/api/personal/file/3961BBCB25D640F88EA1478B6D52EE49?method=getImage&version=6676&cstk=YqFEt6qE)]
查看案例Demo

4、transition-delay

transition-delay：延迟指定时间后执行过度效果。值以秒（s）或毫秒（ms）为单位。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。可以指定多个延迟时间，每个延迟用逗号分开，分别作用于你所指定的相符合的css属性transition-property;

基本语法：
transition: time | inherit | initial | unset

time：指定的时间，格式：10s | 10ms | 0.5s (.5s) | -10ms | -5s (-.5s)
inherit：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m6jrEqdH-1578224041795)(https://note.youdao.com/yws/api/personal/file/79B921A6574A41A2BF3EC630B09A8662?method=getImage&version=6679&cstk=YqFEt6qE)]

查看案例Demo

5、transition

transition：它是transition-property、transition-duration、transition-timin-function、transition-delay 的缩写形式，能够更方面的设置过渡效果，一般在开发中使用这种方式写过渡效果。

基本语法：
transition: property duration timing-function delay | none

none：没有过渡效果。

基本写法：

    <!--两个值，属性名，过渡持续时间-->
    transition: margin-right 4s;
    <!--三个值，属性名，过渡持续时间，延迟开始过渡时间-->
    transition: margin-right 4s 1s;
    <!--三个值，属性名，过渡持续时间，过渡动画效果-->
    transition: margin-right 4s ease-in-out;
    <!--四个值，属性名，过渡持续时间，过渡动画效果，延迟开始过渡时间-->
    transition: margin-right 4s ease-in-out 1s;
    
    <!--可以同时写多个过渡属性，每个过渡之间用逗号分开-->
    transition: margin-right 4s, color 1s;
    
    <!--也可以使用all表示全部属性-->
    transition: all 0.5s ease-out;
    
    transition: inherit;
    transition: initial;
    transition: unset;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r1NshGBc-1578224041795)(https://note.youdao.com/yws/api/personal/file/2CF8E1EAE9E642F18801C679D17C1EA9?method=getImage&version=6682&cstk=YqFEt6qE)]

来源：CSDN

作者：qq_37417446

链接：https://blog.csdn.net/qq_37417446/article/details/103846405

标签

transition