动画和过渡
| 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.90atr.90.1 | 旋转 | transform:rotate(90deg);transform:rotate(-90deg); | |
atrx.90atrx.90.1 | X轴旋转 | transform:rotateX(90deg);transform:rotateX(-90deg); | |
atry.90atry.90.1 | Y轴旋转 | transform:rotateY(90deg);transform:rotateY(-90deg); | |
atrz.90atrz.90.1 | 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.50att.50.1 | 移动 | transform:translate(50rpx);transform:translate(-50rpx); | |
attx.50attx.50.1 | X轴移动 | transform:translateX(50rpx);transform:translateX(-50rpx); | |
atty.50atty.50.1 | Y轴移动 | transform:translateY(50rpx);transform:translateY(-50rpx); | |
ato.top,leftato.100%,50% | 变换的中心点 | transform-origin:top left;transform-origin:100% 50%; |