1、过渡

1.1 transition-property属性

语法格式：
transition-property : none | all | property ;

值 描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 
  1. div{
  2.     width:400px;
  3.   height:500px;
  4.   background-color:red;
  5. }
  6. div:hover{
  7.   background-color:blue;
  8.   transition-property:background-color;
  9. }
  10. /*设置鼠标移动到div上时，背景颜色由红色慢慢变为蓝色*/

1.2 transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
语法格式：
transition-duration : time ;

div{
    width:400px;
  height:500px;
  background-color:red;
}
div:hover{
  background-color:blue;
  transition-property:background-color;
    transition-duration:5s;
}
/*设置鼠标移动到div上时，背景颜色由红色慢慢变为蓝色，过程花费5秒的时间*/

1.3 transition-timing-function属性

改属性规定过渡效果的速度曲线，默认值为ease。
语法格式：
transition-timing-function:linear;

值 描述
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(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 
div{
    width:500px;
  height:500px;
  background-color:red;
  border:5px solid yellow;
  border-radius:0px;
}
div:hover{
    border-radius:105px;
  transition-property:border-radius;
    transition-duration:5s;
    transition-timing-function:ease-in-out;
}
/*当鼠标指针移动到div上时，过渡的动作将会被触发，正方形将会慢速开始变化，然后逐渐加速，随后慢速变为正圆形*/

1.4 transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
语法格式：
transition-delay：time；

transition-delay：5s；  /*过渡动作五秒后开始触发*/

1.5 transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
语法格式：
transition：transition-property transition-duration transition-timing-function transition-delay

transition：transition-property  transition-duration  transition-timing-function  transition-delay

使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

transition：border-radius 5s ease-in-out 2s；

注意：无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多个过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。