求助!!!!CSS transform 如何指定开始位置,而不是轴上的偏移量
```html
<transition
name="dialog-fade"
ref="dialogTransition"
@after-enter="afterEnter"
@after-leave="afterLeave"
enter-active-class="animate__animated my__fadeInBottomLeft"
leave-active-class="animate__animated animate__fadeOutBottomLeft"
>
<div>.......<div/>
</transition>
```css
@-webkit-keyframes myfadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes myfadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.my__fadeInBottomLeft{
-webkit-animation-name: myfadeInLeft;
animation-name: myfadeInLeft;
}
translate3d指定不论是百分比或者是px都是指的在轴上的偏移量,无法指定从我想要的位置开始。
我的解答思路和尝试过的方法
可以指定位置开始动画,比如从距离屏幕左侧100px、屏幕底部50px,开始动画,哪位大佬可以指点一二感激不尽!!!!!!!