transition
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
transition 属性是一个简写属性，用于设置四个过渡属性：
| 值 | 属性 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 规定速度效果的速度曲线，主要有linear：以相同速度开始至结束的过渡效果；ease：慢速开始，然后变快，然后慢速结束的过渡效果；ease-in：以慢速开始的过渡效果；ease-out：规定以慢速结束的过渡效果；ease-in-out：规定以慢速开始和结束的过渡效果；cubic-bezier(0.42,0,0.58,1):定义自己的值,在0和1之间; |
| transition-delay | 定义过渡效果何时开始 |
可简写为：transition: property duration timing-function delay;
例如：
<style>
.box{ width: 200px; height: 200px; background: #00f; transition: width 1s linear; }
.box:hover{ width: 800px; }
</style>
<div class="box"></div>原文地址：https://www.cnblogs.com/dxzg/p/8350506.html
时间： 2024-10-28 07:25:12