| 12345678910111213141516171819202122232425262728 |
- * {
- margin: 0;
- padding: 0;
- }
- #box {
- width: 200px;
- height: 200px;
- background: #00f;
- transition: width 2s linear 1s;
- }
- /*
- transition主要包含四个属性值：
- transition-property:all 表示要参与过渡的属性 all是默认值
- transition-duration:3s 表示动画持续的时长和速度曲线 默认值0（时长决定速度）
- transition-timing-function:linear 动画运动的方式类型
- ease：默认值 规定慢速开始，然后变快，然后慢速结束的过渡效果
- linear:匀速运动
- ease-in:表示由慢到快
- ease-out:表示由快到慢
- ease-in-out:规定以慢速开始和结束的过渡效果
- cubic-bezier(n,n,n,n) 三次贝塞尔曲线
- transition-delay:1s 动画的延迟时间
- IOS下safari渲染transition时出现闪屏问题，解决方法：
- backface-visibility:hidden;背面可见度
- display:none;的元素并不支持css3动画
- */
|
