transition过渡动画的自述

Hi,大家好！我是transition，经常有小伙伴把我和隔壁animation搞混，下面我就好好的介绍一下自己，让大家能明白我到底是干啥的。
看看我身上的属性吧：
大家总是叫我transition，其实我有四个重要的部分组成，下面一一听我介绍：
1.transition-property:需要参与过渡的属性，例如：width、height、background…
2.transition-duration:过渡动画的持续时间，单位秒s或毫秒ms
3.transition-delay：延迟过渡的时间，单位秒s或毫秒ms
4.transition-timing-function：动画过渡的动画类型
我可以以属性的形式被定义

div{
   
  width:100px;
  height:100px;
  background:blue;
  transition-property: width;/* 需要参与过渡的属性 */
  transition-duration: 1s;/* 过渡动画的持续时间 */
  transition-delay: 1s;/* 延迟过渡的时间，单位秒s或毫秒ms */
  transition-timing-function: ease-out;/* 动画过渡的动画类型 */
}
div:hover{
   
  width:300px; 
}

效果图
效果出来了我是不是很厉害？可是上面的我由于属性太多有点不招新手同学待见 o(╥﹏╥)o
其实平时的我是下面这种形式出现在代码中的：