CSS 过渡

文章目录

• • • transition
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay

属性	说明	版本
transition	复合属性，可以一次声明所有过渡属性。	CSS3
transition-property	设置用来进行过渡的 CSS 属性。	CSS3
transition-duration	设置过渡进行的时间长度。	CSS3
transition-timing-function	设置过渡进行的时序函数。	CSS3
transition-delay	指定过渡开始的时间。	CSS3

浏览器支持：

transition

transition 属性设置元素过渡效果，四个简写属性依次是：

transition-property, transition-duration, transition-timing-function, transition-delay

。

语法：

transition: property duration timing-function delay;

/*width属性, 过渡时间5s, 匀速, 延迟2s执行*/
transition: width 5s linear 2s;

/*width属性, 过渡时间5s, 其他默认值*/
transition: width 5s;

/*所有属性过渡时间5s, 其他默认值*/
transition: 5s;
           

兼容低版本浏览器(添加浏览器内核前缀)：

div{
  -o-transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;   /*无前缀的始终在后面写*/
}
           

transition-property

transition-property 属性指定获得过渡效果的属性。

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	CSS 属性名称列表，列表以逗号分隔。

transition-property: width;
transition-property: width,height;
transition-property: all;
           

兼容低版本浏览器(添加浏览器内核前缀)：

div{
  -o-transition-property: width;
  -moz-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;   /*无前缀的始终在后面写*/
}
           

例：当鼠标悬浮div时，宽/高在2秒内逐渐增大到300px/200px

div{
  width:100px;
  height:100px;
  background:red;
  transition-property: width,height;
  transition-duration: 2s;
  -webkit-transition-property: width,height; /* Safari */
  -webkit-transition-duration: 2s;   /* Safari */
}
div:hover{
  width:300px;
  height:200px;
}
           

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒计）。

值	描述
time	数值(单位s)，默认值是 0，意味着不会有效果。

transition-duration: 3s;   /*过渡时间3秒*/
transition-duration: 0.3s; /*过渡时间0.3秒*/

/*兼容低版本浏览器 Safari*/
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
           

兼容低版本浏览器(添加浏览器内核前缀)：

div{
  -o-transition-duration: 5s;
  -moz-transition-duration: 5s;
  -webkit-transition-duration: 5s;
  transition-duration: 5s;   /*无前缀的始终在后面写*/
}
           

transition-timing-function

transition-timing-function 属性指定切换效果的速度。

值	描述
linear	匀速，过渡效果（等于 cubic-bezier(0,0,1,1)。
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)。
cubic-bezier()	在 cubic-bezier 函数中定义自己的值。参数是 0 至 1 之间的数值。

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42,0,1,1);
           

兼容低版本浏览器(添加浏览器内核前缀)：

div{
  -o-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear; /*无前缀的始终在后面写*/
}
           

transition-delay

transition-delay 属性指定何时将开始切换效果。单位秒(s)。

值	描述
time	等待开始的时间。数值，单位s(秒)。

transition-delay: 2s;   /*延迟2秒*/
transition-delay: 0.2s; /*延迟200毫秒*/
           

兼容低版本浏览器(添加浏览器内核前缀)：

div{
  -o-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -webkit-transition-delay: 2s;
  transition-delay: 2s; /*无前缀的始终在后面写*/
}