CSS3之过渡 transition

最新推荐文章于 2023-05-05 17:42:17 发布

原创最新推荐文章于 2023-05-05 17:42:17 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #html #css

本文深入讲解CSS3过渡的实现原理，包括transition属性的详细说明，如transition-property、transition-duration、transition-timing-function和transition-delay。并通过实例展示了如何设置元素的过渡效果。

首先，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;
}