开发者学堂课程【HTML5 新特性学习：过渡】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5058
过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
浏览器支持:
Internet Explorer 10. Firefox、 Chrome 以及 Opera 支持 transition 属性 Safari 需要前缀-webkit-
效果:
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
代码如下
<!DoCTYPE htnl>
chtml langm"en">
<head>
<meta charset-"utF-s">
<title></title>
<style>
div{
width:100px;|
height:100px;
background-colorz aqua;
transition: width 3s;
-webkit-transitions width 3sg
div:hover(
width:400px;
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<!D0CTYPE htal>
<html lang="en">
<head>
<meta charset="utF-8">
< title></title>
<style>
div(
width:100px;
height:100px;
background-color: aqua;
transition: width Zs,height 2s;
~vebkit-transition: width 2s,height 2s,-vebkit-transform 2s;
}
div:hover{
width:300px;
height: 300px;
transforn: rotate(180deg):
ebkit-transforn: rotate(18odeg);
</style>
</head
<body>
<div>
这个文字是为了看到xuanzhuan </div2
</ body>
</htmls>
