CSS3 过渡
基本概念
- transiton提供了一种在更改css属性的时候,控制动画的速度的方法;它可以控制某个属性在指定时间内完成效果,而不是立即生效的,也可以控制过渡的变化的速率。
属性
transition-property
-
设置过渡的属性名
-
语法:
transtion-property:css属性名1,css属性名2.....;
- 默认值all,代表所有属性多可以过渡
-
注意:
- 只设置过渡属性名,是没有效果的,需要配合过渡时长使用
- 多个属性同时过渡时,中间使用逗号隔开
transition-duration
-
设置过渡的时长
-
语法:
transiton-duration:时间;
- 时间需要带单位, s代表秒 ms代表毫秒,可以是小数 1s=1000ms
- 默认0s
-
注意:
-
如果过渡的属性名多于过渡的时间个数时,时间重复一遍
-
多个时间之间使用逗号隔开
案例:
.box{ width: 100px; height: 100px; background-color: orange; margin: 100px auto; /* 设置过渡属性可以有多个属性,多个属性用逗号来隔开 */ transition-property: width,height,background-color; /* 设置过渡时间要和过渡属性值得顺序保持一致,才能一一对应 但是如果过渡属性比过渡时间多,那过渡时间只能复制一遍 */ transition-duration: 2s,3s; } .box:hover{ width: 200px; height: 200px; background-color gray; }
-
transition-timing-function
- 设置过渡的速率
- 属性值:
ease
:以低速开始,然后变快,在结束前变慢linear
:匀速ease-in
:以低速开始ease-out
:以低速结束ease-in-out
:以低速开始和结束cubic-bezier();
:贝塞尔曲线
贝塞尔曲线(自动义速度曲线)
-
是一种用于构建二维图形的速度曲线,本质是一个数学曲线
-
作用:在css中,贝塞尔曲线用来定义的动画的速度曲线
-
语法:
cubic-bezier(x1,y1,x2,y2);
注意:这两个坐标用于控制曲线的形状,不同形状所对应的速度不一样,甚至可以为负数
-
构建贝塞尔曲线:https://cubic-bezier.com/
transition-delay
- 设置过渡的延迟时间,也就是过渡效果何时开始,默认为0s
transition
-
过渡的复合属性
-
语法:
transition: 属性名 过渡时长 过渡的延迟 速度q 多个属性过渡,中间使用逗号隔开 transition:属性名1 过渡时长 过渡的延迟 速度,属性名2 过渡时长 过渡延迟 速度;
- 特别注意:两个时间,前面代表过渡时长,后面代表延迟时间
-
注意:transition针对display没有效果
兼容性问题
IE 10+、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释:IE 10 以下版本,不支持 transition 属性。
注释:Chrome 25 以下版本,需要前缀 -webkit-。