时间戳

首页 > 解决方案 > 过渡和变换之前的 CSS 位置元素

javascript - 过渡和变换之前的 CSS 位置元素

问题描述

我正在尝试使用 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%。

任何想法？

标签： javascripthtmlcsscss-animationscss-transitions

解决方案

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

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

推荐阅读