动画和过渡

css	说明	style	备注
atp-a	全部属性过渡	transition-property: all;
atp-n	无属性过渡	transition-property: none;
atp-w	宽度过渡	transition-property: width;
atp-h	高度过渡	transition-property: height;
atp-m	外边距过渡	transition-property: margin;
atp-mt	上外边距过渡	transition-property: margin-top;
atp-mb	下外边距过渡	transition-property: margin-bottom;
atp-ml	左外边距过渡	transition-property: margin-left;
atp-mr	右外边距过渡	transition-property: margin-right;
atp-l	左位置过渡	transition-property: left;
atp-r	右位置过渡	transition-property: right;
atp-t	上位置过渡	transition-property: top;
atp-b	下位置过渡	transition-property: bottom;
atp-p	内边距过渡	transition-property: padding;
atp-pl	左内边距过渡	transition-property: padding-left;
atp-pr	右内边距过渡	transition-property: padding-right;
atp-pt	上内边距过渡	transition-property: padding-top;
atp-pb	下内边距过渡	transition-property: padding-bottom;
atp-o	透明度过渡	transition-property: opacity;
atp-bc	背景颜色过渡	transition-property: background-color;
atp-boc	边框颜色过渡	transition-property: border-color;
atp-btc	上边框颜色过渡	transition-property: border-top-color;
atp-bbc	下边框颜色过渡	transition-property: border-bottom-color;
atp-blc	左边框颜色过渡	transition-property: border-left-color;
atp-brc	右边框颜色过渡	transition-property: border-right-color;
atp-tr	变换过渡	transition-property: transform;
attf-e	ease过渡效果	transition-timing-function: ease;
attf-ei	ease-in过渡效果	transition-timing-function: ease-in;
attf-eo	ease-out过渡效果	transition-timing-function: ease-out;
attf-eio	ease-in-out过渡效果	transition-timing-function: ease-in-out;
attf-l	线性过渡效果	transition-timing-function: linear;
attf-cb	自定义三次贝塞尔曲线过渡效果	transition-timing-function: cubic-bezier();	需要指定具体的贝塞尔曲线参数
atd-500	动画时间	transition-duration:500ms;
atr-90 atr-n90	旋转	transform:rotate(90deg); transform:rotate(-90deg);
atrx-90 atrx-n90	X轴旋转	transform:rotateX(90deg); transform:rotateX(-90deg);
atry-90 atry-n90	Y轴旋转	transform:rotateY(90deg); transform:rotateY(-90deg);
atrz-90 atrz-n90	Z轴旋转	transform:rotateZ(90deg); transform:rotateZ(-90deg);
ats-0-5	缩放	transform:scale(0.5);
atsx-0-5	X轴缩放	transform:scaleX(0.5);
atsy-0-5	Y轴缩放	transform:scaleY(0.5);
att-50 att-n50	移动	transform:translate(50rpx); transform:translate(-50rpx);
attx-50 attx-n50	X轴移动	transform:translateX(50rpx); transform:translateX(-50rpx);
atty-50 atty-n50	Y轴移动	transform:translateY(50rpx); transform:translateY(-50rpx);
ato-top,left ato-100%,50%	变换的中心点	transform-origin:top left; transform-origin:100% 50%;