1、前言
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property 指定CSS属性的name，transition效果transition-duration 指定过渡效果的持续时间transition-timing-function 过度的时序函数transition-delay 过渡效果延迟，等一段时间后再执行
2、transition-property 用法
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>半壁为璜()</title> <style> div{width:100px;height:100px;background:red;transition-property: width;transition-duration: 2s;-webkit-transition-property: width; /* Safari */-webkit-transition-duration: 2s; /* Safari */}div:hover{width:300px;}</style></head><body><p><b>注意:</b> 该属性不兼容 IE9以及更早版本的浏览器.</p><div></div><p>鼠标移动在块上查看动画效果.</p></body></html>
3、transition-duration 用法
<style> div{width:100px;height:100px;background:red;transition-property:width;transition-duration:5s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:5s;}div:hover{width:300px;}</style>
4、transition-timing-function用法
可选值
steps()分布执行过渡效果
可设置一个第二个值
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡
transition-timing-function：step(2,start);
5、transition-delay用法
<style> div{width:100px;height:100px;background:red;transition-property:width;transition-duration:5s;transition-delay:2s;/* Safari */-webkit-transition-property:width; -webkit-transition-duration:5s;-webkit-transition-delay:2s;}div:hover{width:300px;}</style>
注意：
transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中的第一个是持续时间，第二个是延迟时间
