持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
前言
在我们开发过程中，过渡效果必不可少，比如有时我们想通过某个动作实现元素样式的变化，又不希望用JavaScript去控制的时候，css3中的过渡（transition） 效果便可以轻松搞定
属性
我们在使用过渡效果时要考虑两个方面：
1.过渡效果持续时间
2.过渡前后的样式变化
过渡效果主要有以下四个属性：
- transition-property 应用过渡效果的 CSS 属性名称
- transition-duration 过渡效果持续的时间
- transition-timing-function 过渡效果时间曲线，默认是 "ease"
- transition-delay规定过渡效果何时开始
如果要添加多个样式的变换效果，可以直接用transition一个属性名融合，添加的属性由逗号分隔，例： transition: height, 1s, linear, 1s
扩展: transition-timing-function又包括以下属性：
- linear 匀速从开始至结束的过渡效果
- ease 以慢速开始，然后速度变快，最后慢速结束的过渡效果
- ease-in 以慢速开始的过渡效果
- ease-out 以慢速结束的过渡效果
- ease-in-out 以慢速开始，以慢速结束的过渡效果
- cubic-bezier(n,n,n,n) 在三次贝塞尔函数中定义自己的值
代码实现
一个高100px,宽100px的盒子，鼠标悬停时匀速变为高200px,宽200px的盒子,时间均为1s
<head>
<style>
div {
width: 100px;
height: 100px;
background: pink;
transition: width 1s, height 1s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
兼容性
作为css3新特性之一，transition同样不支持IE10以下浏览器
在IE7-9进行测试时，transition的效果没有过渡效果（transition-timing-function效果），transition-property，transition-duration，transition-timing-function，transition-delay属性都不起作用
下面版本及之后版本的浏览器适用transition属性:
- 谷歌浏览器:26.04.0
- ie浏览器:10.0
- 搜狐浏览器:16.0 4.0
- ios浏览器:6.1 3.1
- 欧鹏浏览器:12.1 10.5
