过渡：通过CSS3,我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果.
浏览器支持Internet Explorer1O、Firefox、Chrome以及Opera支持transition属性,Safari需要前缀-webkit-
效果：CSS3过渡是元素从一种样式逐渐改变为另一种的效果.要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个CSS属性,规定效果时长
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 100px;
background-color: #f00;
transition: width 3s;
-webkit-transition: width 1s;
}
div:hover{
width: 600px;
}
</style>
</head>
<body>
<div>
关于 Vue.js 的教程已经非常丰富，大部分开发者阅读文档后，都可以很快上手 Vue.js 的开发，而写好每一个组件，成了当前众多开发者的一个难题。
</div>
</body>
</html>
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 100px;
background-color: #f00;
transition: width 2s,height 2s;
-webkit-transition: width 2s,height 2s,-webkit-transform 2s;
}
div:hover{
width: 400px;
height: 400px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
</style>
</head>
<body>
<div>
关于 Vue.js 的教程已经非常丰富，大部分开发者阅读文档后，都可以很快上手 Vue.js 的开发，而写好每一个组件，成了当前众多开发者的一个难题。
</div>
</body>
</html>
转载请注明：大灰牛博客 » transition过渡