Css transition(过渡)

Css transition(过渡)

提示：transition(过渡)是指为了添加鼠标移到某种元素时，其可以从一种样式转变到另一种样式。过渡效果通常在用户将鼠标指针浮动到元素上时发生。

1. transition-property ：规定设置过渡效果的css属性名称
2. transition-duration ：规定完成过渡效果需要多少秒或毫秒
3. transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
4. transition-delay ：指定开始出现的延迟时间

1.transition-property (将鼠标悬停在一个div元素上，逐步改变元素的宽度)

div
{
	transition-property:width; /* property 挂载宽 */
	-moz-transition-property: width; /* Firefox 4 */
	-webkit-transition-property:width; /* Safari and Chrome */
	-o-transition-property:width; /* Opera */
}

2.transition-duration (规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果)

div{
	transition-property:width; /* property 挂载宽 */
	transition-duration:5s; /* 延迟 5s */
	-webkit-transition-duration: 5s; /* Safari */
}

3.transition-timing-function(指定切换效果的速度,此属性允许一个过渡效果，以改变其持续时间的速度。)

/* 过渡效果以同样的速度从开始到结束 默认值：ease*/
div{
	transition-property:width; /* property 挂载宽 */
	transition-duration:5s; /* 延迟 5s */
	transition-timing-function: linear; /* 匀速 */
	-webkit-transition-timing-function: linear; /* Safari and Chrome */
    /*linear（规定以相同速度开始至结束的过渡效果）   匀速；
	ease（默认，规定慢速开始然后变快，然后慢速结束的过渡效果）   默认；
	ease-in（规定以慢速开始的过渡效果）   加速；
	ease-out（规定以慢速结束的过渡效果）    减速；
	ease-in-out（规定以慢速开始和结束的过渡效果）   相对于匀速，（开始和结束都慢）两头慢；
	cubic-bezier（n,n,n,n）(在cubic-bezier函数中定义自己的值，可能的只是0-1之间的数值)自定*/
}

4.**transition-delay **(指定秒或毫秒数之前要等待切换效果开始)

/* 等待2秒前切换效果开始：*/
div{
	transition-property:width; /* property 挂载宽 */
	transition-duration:5s; /* 延迟过程 5s */
	transition-timing-function: linear; /* 匀速 */
	transition-delay: 2s;  /* 延迟2秒 */
	-webkit-transition-delay: 2s; /* Safari */
}

总结
transition 的完整写法如下

div{
    transition: 1s 1s height ease;
}

这其实是一个简写形式，可以单独定义成各个属性

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}