transition 过渡
如果想做出细腻的过渡 效果 ，那么这个 属性 可能会满足你的需求。这个 属性 简单的来说就是用来模拟需要变化的 属性 ，从开始到结束数值之 间的 过渡。
1. 官方定义
transition 属性 是 一个 简写 属性 ，用于设置四个过渡 属性 ：
transition-property transition-duration transition-timing-function transition-delay
2. 解释
transition 用来设置 一个 属性 状态从开始到结束中间这个过程的变化。它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 、这四个 属性 的缩写。它们分别代表了：要使用过度动画的 属性 、过渡动画的时间、过渡动画的加速度 函数 即数值变化的快慢过程、过渡动画的延迟时间。而我们通常使用过渡 属性 完成元素过渡的这个过程一般使用 transition 。
3. 语法
.demo {
transition : property duration timing-function delay ;
}
属性 值说明：
属性 值 描述 transition-property 规定设置过渡 效果 的 CSS 属性 的 名称 。 transition-duration 规定完成过渡 效果 需要多少秒或毫秒。 transition-timing-function 规定速度 效果 的速度曲线。 transition-delay 定义过渡 效果 何时开始。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android 9+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4
5. 实例
1. 当鼠标移动到元素上，使用过渡 属性 来让元素的高度变化，从而实现 一个 过渡 效果 。
< div class = " demo " > </ div >
.demo {
width : px ;
height : px ;
background : #000 ;
transition : height s ;
}
.demo :hover {
height : px ;
}
效果 图：
`hover` 之后高度变化 效果 图
当鼠标移动上去改变元素的宽高值，让它们都实现过渡动画。
写法一：
.demo {
width : px ;
height : px ;
background : #000 ;
transition : height s,width s ;
}
.demo :hover {
width : px ;
height : px ;
}
写法二：
.demo {
width : px ;
height : px ;
background : #000 ;
transition : all s ;
}
.demo :hover {
width : px ;
height : px ;
}
效果 图：
`hover` 宽高变化 效果 图
说明：这两种方式都可以实现我们所要的过渡方式。不过这里推荐使用第一种方式。
改变上面过渡完成的速度。
.demo {
width : px ;
height : px ;
background : #000 ;
transition : height s ease-in,width s ease-out ;
}
.demo :hover {
width : px ;
height : px ;
}
效果 图：
改变过渡完成的速度 效果 图
说明：在 transition 第三个值使用了动画 函数 ，改变了过渡过程中完成的速度，我们可以很清楚的看到他们的变化速度。
当鼠标移动上去 1s 之后开始动画。
.demo {
width : px ;
height : px ;
background : #000 ;
transition : height s ease-in s,width s ease-out s ;
}
.demo :hover {
width : px ;
height : px ;
}
效果 图：
时间设置 效果 图
说明：我们可以看到鼠标放到元素上 1s 之后开始动画，而离开元素之后 1s 之后开始动画。
6. Tips
通过上面的实例可以知道 transition 的 属性 值配置很灵活，但是我们要遵循一定的规律，这不单是 增加 了 代码 的可读性，也符合浏览器解析规则的规律。
hover 到按钮上改变按钮的位置和背景颜色。
< button class = " demo " > </ button >
.demo {
width : px ;
height : px ;
line-height : px ;
border-radius : px ;
background : #000 ;
color : #fff ;
border : none ;
transition : background s,transform s ;
}
.demo :hover {
background : red ;
transform : translateY ( -px ) ;
}
效果 图：
改变按钮的位置和背景颜色 效果 图
7. 小结
尽量不要使用 all 来驱动过渡的 属性 ，这会使得浏览器卡顿。 尽量不要使用 margin-left 这类的 属性 ，很可能会打乱 页面 元素的位置。 推荐使用 transform 来改变元素的位置和大小。
animation 动画 ? ?transform 3D 空间转换