Jquery 使用动画在左下角移动元素

我只是尝试使用CSS动画移动页面左下角的

元素。但我无法正确地设置动画。动画从原始位置开始，在底部突然结束。我希望整个过程都顺利

请帮我输入正确的代码

下面是我的代码：

$（“#可展开”）。在（'click'，函数（事件）{
$（“#可扩展p”）.addClass（“动画旋转设置左”）；
});
。动画{
动画持续时间：2秒；
动画填充模式：两者都有；
}
@关键帧向左旋转{
从{
变换原点：左下角；
不透明度：1；
}
到{
变换原点：左下角；
变换：旋转3d（0,0,1，-90度）；
不透明度：1；
保证金：5px；
位置：固定；
左：20px；
底部：100px；
}
}
.向左旋转{
动画名称：rotateOutUpLeft；
}

标题
可点击div

要移动的文本

您不需要CSS
@关键帧来执行此操作：


$（“#可展开”）。在（'click'，函数（事件）{
$（“#可扩展p”）.addClass（“动画”）；
});
。制作动画{
变换原点：左下角；
变换：旋转3d（0,0,1，-90度）translateX（-50px）；
保证金：5px；
过渡：一切都很轻松；
}

标题
可点击div

要移动的文本

您不需要CSS
@关键帧来执行此操作：


$（“#可展开”）。在（'click'，函数（事件）{
$（“#可扩展p”）.addClass（“动画”）；
});
。制作动画{
变换原点：左下角；
变换：旋转3d（0,0,1，-90度）translateX（-50px）；
保证金：5px；
过渡：一切都很轻松；
}

标题
可点击div

要移动的文本

问题在于您正在将元素的位置从静态（默认值）更改为固定，这是不可设置动画的

一种解决方案是初始将其位置设置为“固定”，并且只更改动画中的
底部
属性


$（“#可展开”）。在（'click'，函数（事件）{
$（“#可扩展p”）.addClass（“动画旋转设置左”）；
});
正文{
位置：相对位置；
最小高度：100vh；
}
.动画{
动画持续时间：2秒；
动画填充模式：两者都有；
}
#可膨胀p{
左：40px；
底部：钙（100%-160px）；
位置：绝对位置；
}
@关键帧向左旋转{
从{
变换原点：左下角；
不透明度：1；
}
到{
变换原点：左下角；
变换：旋转3d（0,0,1，-90度）；
不透明度：1；
保证金：5px；
左：20px；
底部：10px；
}
}
.向左旋转{
动画名称：rotateOutUpLeft；
}

标题
可点击div

要移动的文本

问题在于您正在将元素的位置从静态（默认值）更改为固定，这是不可设置动画的

一种解决方案是初始将其位置设置为“固定”，并且只更改动画中的
底部
属性


$（“#可展开”）。在（'click'，函数（事件）{
$（“#可扩展p”）.addClass（“动画旋转设置左”）；
});
正文{
位置：相对位置；
最小高度：100vh；
}
.动画{
动画持续时间：2秒；
动画填充模式：两者都有；
}
#可膨胀p{
左：40px；
底部：钙（100%-160px）；
位置：绝对位置；
}
@关键帧向左旋转{
从{
变换原点：左下角；
不透明度：1；
}
到{
变换原点：左下角；
变换：旋转3d（0,0,1，-90度）；
不透明度：1；
保证金：5px；
左：20px；
底部：10px；
}
}
.向左旋转{
动画名称：rotateOutUpLeft；
}

标题
可点击div

要移动的文本

动画不平滑，因为您正在更改元素的位置。
p
是否必须在开始时处于
位置：静态
？删除
位置：固定
@fabio.sang我在开始时没有真正更改
位置
值。它保持默认状态。只要我的页面布局完整，我就不会对更改值有任何问题。动画不是平滑的，因为您正在更改元素的
位置。
p
是否必须在开始时处于
位置：静态
？删除
位置：固定
@fabio.sang我在开始时没有真正更改
位置
值。它保持默认状态。只要我的页面布局是完整的，我对更改值没有任何问题。这个解决方案不会将元素放在页面的左下角。它只是旋转并将元素放置在原始位置的左侧。@GauravRathod问题不在于如何将元素放置在页面的底部、左侧。问题是，左下方已经有一个元素设置了错误的动画。如果你看运行OPs的代码和我的代码，它们都在同一个地方开始和结束，但我的动画做得很流畅，这就是问题的要求。实际上我还希望元素位于页面的左下角。感谢您的帮助。@GauravRathod您的问题是：“我只是想用CSS动画移动页面左下角的元素。”由于所讨论的元素已经存在，并且给出了您的措辞（at，not to），因此不清楚您是否想将其移到其他位置。您只需添加一个
transform:translate（x，y）
来移动元素。我的答案仍然是如何顺利制作动画。@CBroe“backa