最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3中对过渡(transition)进行调速,以及延时
时间:2015-12-24 编辑:简简单单 来源:一聚教程网
CSS3 transform是什么?
transform的含义是:改变,使…变形;转换
CSS3 transform都有哪些常用属性?
transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。
1,使用调速函数控制过渡效果的速度曲线(加速,减速等)
使用调速函数可以设置过渡效果的速度曲线,从而实现过渡效果随着时间来改变其速度。比如:开始很慢然后加速或者开始很快然后减速。
(1)CSS3定义了如下的调速函数:
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
(2)调速函数的使用
使用时只需要把调速函数跟在过渡属性的时间参数后面。如果不填的话则使用默认调速函数(ease)
1
transition: opacity 10s ease-in-out;
(3)使用样例1:
下面通过样例演示各种调速函数的效果区别。鼠标移入方框,方框内的方块会向右移动,同时方块会旋转,边角变圆角,背景色和文字颜色也在改变。这些样式的改变都会有过渡效果,同时由于使用不同的调速函数,过渡的快慢也是有区别的。
(default)
(4)使用样例2:
下面通过对柱状图的宽度改变过渡,演示不同调速函数的效果区别。
(default)
2,为过渡增加延时
过渡属性还可以添加一个可选的延时,用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。
延时1秒
下面我们来分解各个属性的用法:
transform:rotate():
含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew():
含义:倾斜;
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate():
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
transform综合:
transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:
.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}
-
上一个: css3的clip-path属性详细介绍
-
下一个: CSS3 多栏文本的使用方法介绍
相关文章
- 用CSS3来实现逐渐发光的方格边框 05-17
- CSS3背景下的@font face有什么规则 05-06
- 详解CSS3中nth-child与nth-of-type的区别 01-10
- CSS3,线性渐变(linear-gradient)的使用总结 01-10
- CSS3动画特效制作教程 好看的CSS3动画特效 01-04
- CSS3 Flexbox属性用法大全 CSS3 Flexbox各种属性详解 01-04