本文详细介绍了CSS3的过渡（Transition）特性，它允许元素在不同样式间平滑过渡，无需Flash或JavaScript。主要涉及过度属性、时间、缓冲描述和延迟时间等关键概念，并通过实例展示了如何设置过渡效果，例如宽度和高度变化的动画。请注意，未指定时间的过渡将不起作用。
学习目标：
掌握css3过度transition
一、什么是过渡：
-
通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。
-
css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点：
1. 需要添加效果的 css 属性
2. 指定效果实现的时长
二、学习总结：
transition:过度属性(all) 过度完成时间 缓冲描述 延迟时间;
属性名词解释:
1.过度属性--------可以直接写all
2.过度时间--------单位是s
3.缓冲描述--------linear匀速,ease非匀速,cubic-bezier贝塞尔曲线
4.延迟时间--------单位是s
实现效果图：
实现效果代码块：
<style>
/* transition 要过渡的属性 花费时间 运动曲线 何时开始*/
div {
width: 300px;
height: 300px;
background-color: skyblue;
/* transition: width .5s ease, height .5s ease 1s; */
/*如果想写多个属性，用 ， 隔开*/
transition: width .5s, height 1s;
}
div:hover {
width: 600px;
height: 500px;
}
</style>
<body>
<div>
</div>
</body>
注意：如果未指定的时间，transition将没有任何效果，因为默认值是0。
2760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
