<分区>
<分区>
我正在学习 CSS 动画，我遇到了 transform: scale(); 的问题。我有一个以 transform: translate(); 为中心的元素像这样:
.gameContainer__deck {
width: 60%;
height: 700px;
z-index: 2;
display: flex;
flex-wrap: wrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
}
这是我的动画:
@keyframes scale-down {
0% {
transform: scale(1);
transform-origin: top left;
}
100% {
transform: scale(0);
transform-origin: bottom right;
}
}
.anScaleDown {
animation: scale-down 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
动画从 top 和 left 属性定义的位置开始，不考虑 transform: translate(-50%, -40%);规则。我希望该元素从使用 translate 属性定义的位置开始动画。我试图找到解决这个问题的方法，但我想到的唯一一件事就是以不同的方式将它居中，但我不能这样做，因为我需要一个响应的宽度。
最佳答案
@keyframes scale-down {
0% {
transform: scale(1);
transform-origin: top left;
}
100% {
transform: scale(0);
transform-origin: bottom right;
}
}
在这里您要重置 transform 属性而不是附加到它
代替
transform: scale(1);
使用
transform: translate(-50%, -40%) scale(1);
确保新的总是在最后
关于html - 变换比例动画从错误的位置开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55995782/