transition:过度属性
transition-property 规定设置过度效果的css属性的名称,默认可以写all
transition-duration 规定完成过度效果需要多少秒或毫秒
transition-timing-function: 默认easetransition-delay:延时时间
ease:逐渐变慢
-
linear:匀速
立即学习“前端免费学习笔记(深入)”;
ease-in:加速
ease-out:减速
ease-in-out:先加速在减速
cubic-bezier:贝塞尔曲线
transitionend:过度完成事件
function addEnd(obj,fn){
obj.addEventListener('WebkitTransitionEnd',fn,false);
obj.addEventListener('transitionend',fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener('WebkitTransitionEnd',fn,false);
obj.removeEventListener('transitionend',fn,false);
}注:1在transition里,如果写了多个,那没改变一次样式,就会触发一次事件 2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
Title

transform:变形
旋转:rotate():度数
斜切:skew():度数
skewX
skewY
缩放:scale():正数、负数、小数
scaleX
scaleY
位移:translate():css支持的单位都可以
translateX
translateY
transform的执行顺序:后写的先执行
transform: scale(2) rotate(50deg); 先执行旋转,在执行缩放
以上transform的值,也会根据中心点(transform-origin)来改变










