允许css 的属性值在一定的时间区间平滑度过，在鼠标单击、获取焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变css 属性值。

  • transition

    transition属性是一个简写属性，用于设置四个过渡属性

    1
    2
    transition: property duration timing-function delay;
    transition: width 1s ease 2s;

  • transition-property

设置过渡效果的 CSS 属性的名称，比如width、 color 、opacity等属性
transition-property：none | all | property

1
transition-property:width

  • transition-duration

    检索或设置对象过渡的持续时间，规定完成过渡效果需要花费的时间

    1
    transition-duration:1s

  • transition-timing-function

检索或设置对象中过渡的动画类型

1
transition-timing-function:ease
  • transition-delay

检索或设置对象延迟过渡时间

1
ttransition-delay:2s

例子：当鼠标经过div时，宽度由100px变成200px,设置过渡效果

1
2
3
4
5
6
7
8
div{
  width:100px;
  transition:width 1s ease 2s 
  // 属性：宽，执行时间：1s，速度曲线：ease，延时：2s
}
div:hover{
   width:200px
}

如果属性设置成 all代表所有属性