一、transition过渡
- transition-property: 要运动的样式(all || [attr] || none)
- transition-duration: 运动时间
- transition-delay:延迟时间
- transition-timing-function: 运动形式
- ease: 逐渐变慢(默认值)
- linear: 匀速
- ease-in: 加速
- ease-out: 减速
- ease-in-out: 先加速后减速
- cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 )
【http://matthewlein.com/ceaser/】
transition: all 2s; // 所有属性，过渡时间2s
transition: width 2s, height 3s;
http://matthewlein.com/ceaser/
二、过渡事件
- Webkit
// 添加事件
obj.addEventListener('webkitTransitionEnd',function(){},false);
// 删除事件
obj.removeEventListener('webkitTransitionEnd', fn,false);
- firefox
// 添加事件
obj.addEventListener('transitionend',function(){},false);
// 删除事件
obj.removeEventListener('transitionend', fn,false);
// 添加事件
function addEvent(obj, fn){
obj.addEventListener('webkitTransitionEnd', fn,false);
obj.addEventListener('transitionend', fn,false);
}
// 删除事件
function removeEvent(obj, fn){
obj.removeEventListener('webkitTransitionEnd', fn,false);
obj.removeEventListener('transitionend', fn,false);
}
三、transform形变(2d)
- rotate() 旋转函数 取值度数
- deg 度数
- transform-origin 旋转的基点
// 以矩形右上角为基点旋转
transform-origin: right top;
// 以矩形左上角为基点旋转
transform-origin: 0 0;
// 旋转30度
transform: rotate(30deg);
- skew() 倾斜函数 取值度数
- skewX()
- skewY()
// x轴和y轴方向，斜切30度
transform: skewX(30deg) skewY(30deg);
skewX
skewY
- scale() 缩放函数 取值 正数、负数和小数
- scaleX()
- scaleY()
// 矩形缩小为0.9
transform: scale(0.9);
- translate() 位移函数
- translateX()
- translateY()
// 往右平移30px
transform: translateX(30px)
案例: 钟表
案例: 扇形菜单
