transition的语法：
transition: property duration timing-function delay第二个参数就是过渡所需要的时间。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂</title>
<style type="text/css">
.h5course {
width: 200px
height: 200px
background-color: #39f
/*3s就是过度的时间*/
-webkit-transition: height 3s ease-in
-o-transition: height 3s ease-in
transition: height 3s ease-in
}
.h5course:hover {
height: 500px
}
</style>
</head>
<body>
<div class="h5course">学习HTML5，到HTML5学堂</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
</body>
</html>
在CSS3中新增了元素的过渡效果属性：transitiontransition也是一个复合属性，包括四个值分别是：
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
基本使用如下：
多个属性可以单独设置，也可以通过transition一起设置
例如：点击按钮时，方块宽度由100px变成200px，延迟1s，过渡时间用了2s，速度是按照cubic-bezier设定的一个速度
以上就是transition的基本使用！
transition-property:all | none | <property>[<property>]
transiton-duration:<time>[,<time>]
<time>用于指定多度持续的时间，默认值为0，如果存在多个属性值，以逗号“,”隔开
transition-delay:<time>[,<time>]
<time>用于指定多度持续的时间，默认值为0，如果存在多个属性值，以逗号“,”隔开
transition-timing-function:linear | ease | ease-in | easse-out | ease-in-out | cubicbezier(x1,y1,x2,y2)[,linear | ease-in | easse-out | ease-in-out |cubicbezier(x1,y1,x2,y2)]
例如：
