1. 过渡
在CSS3
里使用 transition
可以实现补间动画(过渡效果)
- 速写语法
transition:要过渡的属性、花费时间、运动曲线、何时开始。 /*如果有多组属性变化,用逗号隔开*/
- 设置过渡属性名称
transition-property :要过渡属性的名称(如width)
- 设置过渡花费时间
transition-duration :过渡花费的时间(默认是0,时间单位为s/秒)
- 设置过渡时间曲线
transition-timing-function :规定过渡效果的时间曲线默认是ease慢快慢,linear匀速,分步steps(4)
- 设置延迟时间
transition-delay:延迟效果,规定过渡效果何时开始(默认是0,即刻开始)
- 设置所有属性都发生变化(过渡)
transition:all 0.5s; /*简写,后面俩属性可以不写*/ /*这种写法不建议使用,浏览器要挨个遍历属性效率低下,建议多组属性用逗号隔开书写*/
- 过渡是H5中新增的样式好多老版本浏览器不支持,解决方法是加厂商前缀
-moz-transition : left 2s steps(5); -webkit-transition: left 2s steps(5); -o-transition: left 2s steps(5);
- 监听过渡完成事件
/*监听过渡完成的事件 transitionend*/ .addEventListener('transitionend', function() { })
- 注意:过渡写到本身上元素上,谁做过渡动画写到谁CSS里,不建议写到:hover里,因为鼠标移动没有过渡动画效果
2. 2D
变形
简述:
transform
是CSS3
中最具有颠覆性
的特征之一,可以实现元素的位移
、旋转
、倾斜
、缩放
,甚至支持矩阵方式
配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash
才可以实现的效果
-
移动
transform:translate(x,y) /*移动平移,可以改变元素的位置,x、y可以为负值,也可以是%相对于元素自己宽高的百分比, 写一个值默认为 X。值要加上单位如:300px;*/ /*=================================================