过渡CSS3动态效果 过渡属性 一、什么是过渡: 通过 css3 可以在不使用 flash 动画或 javascript 的情况下,为元素从一种样式变换为另一种样式时添加过渡效果。 css3 过渡就是元素从一种样式逐渐改
过渡——CSS3动态效果 过渡属性一、什么是过渡:
二、过渡属性:过渡有四个属性:transition-property 、transition-duration 、transition-timing-function 、transition-delay 1、transition-property 定义: 此属性可以设置添加过渡的 css 样式,可以单独设置只有某一个 css 属性具有过渡效果(property),也可以设置所有属性都有过渡效果(all) 属性: transition-property 有三个属性值:none、all、property
此时宽和高会获得过渡效果,但是背景颜色不会获得过渡效果。因为我们的 transition-property 里面没有添加属性值 background-color 。
2、transition-duration 定义; 此属性表示规定完成过渡效果需要多少秒或毫秒 属性值: transition-duration 只有一个属性值:time。表示完成过渡效果需要花费的时间(以秒s或毫秒ms计算,默认为0,意味着没有效果) 有了这个属性,上面的案例效果就可以展现出来了。
此时将鼠标放在我们的蓝色盒子上,他的宽高会用2s变大,但是背景颜色会瞬间变大,因为我们并没有给背景颜色添加过渡效果。 3、transition-timing-function 定义: 此属性规定了过渡效果的速度,默认值为ease 。 属性值: transition-timing-function 有五个属性值:linear、ease、ease-in、ease-out、ease-in-out
在 transition-duration 的案例中,我们可以感受到那时的过渡变换过程是慢速开始、中间匀速、再慢速结束,因为那时我们没有设置 transition-timing-function 的属性值,他默认为 ease 。此时我们将他设置为 linear ,我们可以感受到,此时他是全程匀速的。其他的属性值,大家也自己尝试一下,感受感受他们的不同吧。 4、transition-delay 定义: 此属性定义:何时将开始过渡效果,也叫过渡延迟时间。 属性值: 与 transition-duration 一样,transition-delay 也只有一个属性值:time。规定在过渡效果开始之前需要等待的时间(以秒s或毫秒ms计算),默认为0,即立即开始过渡效果。
此案例中,蓝色盒子会立即变成红色盒子,但是会静止2s,然后再用2s匀速变大到宽高都为300px。那静止的2s即为 transition-delay 设定的属性值。 三、过渡的简写
按照上面的顺序,列出属性值即可,属性值中间用空格分开。 所以我们的最后一个案例也可以写成:
注意:此时的 transition-property 需要设置为 all 或者只设置一个值(width\height\backgroud-color),设置为 all 时,width、height、background-color都具有过渡效果,设置单个属性值时,其他两个属性值就不具有过渡效果,会立即变化。不可以将 transition-property 写成 width,height,即:
此时的 width 将不具有过渡效果,会立即变为 300px 。只有 height 会延迟2s ,然后花费 2s 变为 300px ,再停顿 2s 后,花费 2s 变回 200px 。 |
2021-04-14
2023-10-11
2021-04-29
2023-11-01
2018-01-07