过渡和变换之前的 CSS 位置元素答案

【问题标题】：CSS position element before transition and transform过渡和变换之前的 CSS 位置元素
【发布时间】：2020-12-22 11:05:48
【问题描述】：

我正在尝试使用 css 转换来转换 div，并通过 css 转换将转换应用于移动。

是否可以为元素指定“开始”位置？我需要在动画之前翻译元素。

.mediaViewItem:nth-child(3) {
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    transform: translate3d(-200%, 0, 0); translate3d(-100%, 0, 0);
}

在上面的代码中，我需要在没有动画的情况下从 translate3d(-200%, 0, 0) 开始，然后通过过渡从 -200% 移动到 -100%。

有什么想法吗？

【问题讨论】：

考虑使用animation 而不是transition？
告诉你！我设法让它与动画一起工作！那是缺少的部分！

标签： javascript html css css-animations css-transitions

【解决方案1】：

那是你为元素设置的初始位置，使用javascript添加一个类当您需要执行动画时，它将元素转换恢复到正常位置。例如。通过js添加一个类，如：

.animated {
    transform: translate3d(0, 0, 0); translate3d(0, 0, 0);
}

【讨论】：