045_CSS3过渡
生活随笔
收集整理的这篇文章主要介绍了
045_CSS3过渡
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1. 通过CSS3, 我们可以在不使用Flash动画或JavaScript的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果。
2. 过渡属性
3. transition属性
3.1. transition 属性是一个简写属性, 用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
3.2. 请始终设置 transition-duration属性, 否则时长为0, 就不会产生过渡效果。
3.3. 默认值
3.4. 可能值
4. transition-property属性
4.1. transition-property属性规定应用过渡效果的CSS属性的名称。
4.2. 默认值
4.3. 可能值
5. transition-duration属性
5.1. transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
5.2. 默认值
5.3. 可能值
6. transition-timing-function属性
6.1. transition-timing-function属性规定过渡效果的速度曲线。
6.2. 该属性允许过渡效果随着时间来改变其速度。
6.3. 默认值
6.4. 可能值
6.5. 实例
#div1 {transition-timing-function: linear; } #div2 {transition-timing-function: ease; } #div3 {transition-timing-function: ease-in; } #div4 {transition-timing-function: ease-out; } #div5 {transition-timing-function: ease-in-out; }6.6. cubic-bezier实例
#div1 {transition-timing-function: cubic-bezier(0,0,1,1); } #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); } #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1); } #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1); } #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1); }7. transition-delay属性
7.1. transition-delay属性规定过渡效果何时开始。
7.2. transition-delay值以秒或毫秒计。
7.3. 默认值
7.4. 可能值
8. 例子
8.1. 代码
<!DOCTYPE html> <html><head><title>CSS3过渡</title><meta charset="utf-8" /><style type="text/css">div {margin: 40px;width: 100px;height: 100px;background: yellow;transition: width 1s linear 0s, height 2s, transform 2s;}div:hover {width: 200px;height: 200px;transform: rotate(180deg);}</style></head><body><div>请把鼠标指针放到黄色的div元素上, 来查看过渡效果。</div></body> </html>8.2. 效果图
总结
以上是生活随笔为你收集整理的045_CSS3过渡的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 044_CSS33D转换
- 下一篇： 046_CSS3动画