**
首先,CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
**
如果要实现这一点,必须规定两项内容:
①指定要添加效果的CSS属性
②指定效果的持续时间。
**
**
**
transition属性的介绍**
**
1.transition-property : 规定应用了过渡的 CSS 属性的名称。
① none :没有属性会使用过渡效果。
②all : 所有属性都将获得过渡效果。
③property : 定义应用过渡效果的 CSS 属性名称,并且以逗号分隔。
2.transition-duration : 规定过渡效果所要花费的时间。默认值是 0。(和动画的animation-duration类似)
3.transition-timing-function : 规定过渡效果的时间曲线。默认值是 “ease”。(和动画的animation-timing-function类似)
①linear: 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
②ease : 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
③ease-in : 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
④ease-out : 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
⑤ease-in-out : 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
⑥cubic-bezier(n,n,n,n) : 在 cubic-bezier 函数中定义自己的值。n的值是 0 至 1 之间的数值。
4.transition-delay : 规定过渡效果何时开始(也就是延迟效果)。默认值是 0。(animation-delay类似))
举例
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:2s;
transition-timing-function:ease-in-out;
transition-delay:1s;
/* 兼容考虑 */
-webkit-transition-property:width;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-delay:1s;
}
div:hover
{
width:400px;
}
简写
div
{
width:100px;
height:100px;
background:red;
transition: width 2s ease-in-out 1s;
/* 兼容考虑 */
-webkit-transition: width 2s ease-in-out 1s;
}
div:hover
{
width:400px;
}