过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
先依次看一下它的各个转换属性:
过渡时间
transition-duration: 10s;
过渡效果的时间曲线
ease先慢后快
linear匀速
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)贝塞尔曲线*/
transition-timing-function: cubic-bezier(0.18, -0.61, 0.19, 1.46);
过渡效果的延迟时间
延迟1s,1s之后开始执行过渡,
-1s负数代表已经执行过1s了
transition-delay: -1s;
选择有过渡效果的属性,指定多个时用逗号隔开,指定所有属性时写all
transition-property: width,height;
复合写法:
transition:1s 2s all ease;后三个值可以省略
第一个值:过渡时间
第二个值:过渡延迟时间
第三个值:需要过渡的样式
第四个值:过渡方式
linear 匀速
ease 先慢后快
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 开始和结束都慢
cubic-bezier 贝塞尔曲线
过渡的例子:
这个例子的大体意思就是,写了一个div给了一个初始样式,然后设置的过渡样式分别为:
过渡时间,过渡时间曲线,有过渡效果的属性
因为给了一个复合写法,所以覆盖了上面的设置
经过以上hover效果,div会从原来的:
变成: