我在使用css3 animation时出现问题，想请教一下
现在有多个元素 点击按钮一个元素translate3d平移到屏幕中心，停留在最后状态，再次点击按钮这个元素回去，另一个元素同时平移。
你要的是这样的吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
/* 定义动画 */
@keyframes moveToCenter {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(50%, 50%, 0);
}
}
@keyframes moveBack {
from {
transform: translate3d(50%, 50%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
/* 应用动画 */
.move-to-center {
animation: moveToCenter 1s ease-in-out;
animation-fill-mode: forwards;
}
.move-back {
animation: moveBack 1s ease-in-out;
animation-fill-mode: forwards;
}
</style>
<body>
<button class="" onclick="on()">点击</button>
<div style="display: flex;">
<div class="element1 box"></div>
<div class="element2 box"></div>
</div>
</body>
<script>
const element1 = document.querySelector('.element1');
const element2 = document.querySelector('.element2');
// 点击按钮时启动/停止动画
const button = document.querySelector('button');
button.addEventListener('click', () => {
if (element1.classList.contains('move-to-center')) {
element1.classList.remove('move-to-center');
element1.classList.add('move-back');
element2.classList.add('move-to-center');
} else {
element1.classList.add('move-to-center');
element1.classList.remove('move-back');
element2.classList.remove('move-to-center');
}
});
//监听move-back属性动画的最终位置，并赋值
const element = document.querySelector('.move-back');
element.addEventListener('animationend', () => {
element.style.transform = 'translate3d(50%, 50%, 0)';
});
</script>
</html>
使用 CSS3 动画实现这种效果需要结合 JavaScript 来实现。首先，你需要在 CSS 中定义一个动画，其中包括动画的开始状态、结束状态和持续时间。例如：
.animation {
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {transform: translate3d(0, 0, 0);}
to {transform: translate3d(100px, 100px, 0);}
}
然后，你需要在 JavaScript 中绑定一个事件处理函数到按钮的点击事件，在处理函数中切换动画的状态。例如：
const button = document.getElementById('button');
const element = document.getElementById('element');
button.addEventListener('click', function() {
if (element.classList.contains('animation')) {
element.classList.remove('animation');
} else {
element.classList.add('animation');
}
});
在这个例子中，每次点击按钮时，都会在元素的 CSS 类列表中添加或删除 animation 类。这样就可以控制元素是否执行动画。
对于另一个元素的平移，你可以在相同的事件处理函数中添加对另一个元素的操作，或者创建另一个事件处理函数来控制另一个元素的动画。
希望这些信息能帮到你！
1、在HTML代码中，为每个元素添加一个类名，用于标识这个元素。
<div class="element1">元素1</div>
<div class="element2">元素2</div>
2、在CSS代码中，为每个元素定义动画。
.element1 {
animation: element1-animation 2s;
}
.element2 {
animation: element2-animation 2s;
}
3、在CSS代码中，为每个动画定义关键帧，例如：
@keyframes element1-animation {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(50%, 50%, 0);
}
100% {
transform: translate3d(100%, 100%, 0);
}
}
@keyframes element2-animation {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-50%, -50%, 0);
}
100% {
transform: translate3d(-100%, -100%, 0);
}
}
这样当第一个元素执行动画时，它会从屏幕的左上角平移到右下角，当第二个元素执行动画时，它会从屏幕的右上角平移到左下角。
然后可以使用JavaScript来控制动画的播放。
望采纳！点击该回答右侧的“采纳”按钮即可采纳！！！
在 CSS3 中，您可以使用 animation 属性来实现动画效果。具体实现方式如下：
定义动画的名称和动画的样式：
@keyframes animatename {
from {
/* 动画的起始状态 */
}
to {
/* 动画的最终状态 */
}
}
为元素添加动画：
element {
animation-name: animatename;
/* 其他的动画属性 */
}
例如，您可以使用以下代码实现点击按钮后元素平移到屏幕中心的效果：
@keyframes moveToCenter {
from {
/* 元素的初始状态 */
}
to {
transform: translate3d(50%, 50%, 0);
/* 将元素平移到屏幕中心 */
}
}
.element {
/* 动画持续时间、动画延迟时间等其他动画属性 */
animation-name: moveToCenter;
}
然后，您可以在 JavaScript 中监听按钮的点击事件，并通过修改元素的 class 来控制动画的播放。
例如：
const button = document.getElementById('button');
const element = document.getElementById('element');
button.addEventListener('click', () => {
element.classList.toggle('moveToCenter');
});
通过这种方式，您就可以实现点击按钮后元素平移到屏幕中心，再次点击按钮元素回到初始位置的效果。
提供参考实例【CSS函数translate、translate3d的使用】，链接：https://www.enjoytoday.cn/2022/12/02/css%E5%87%BD%E6%95%B0translate%E3%80%81translate3d%E7%9A%84%E4%BD%BF%E7%94%A8/
【可参考实例中实际动画展示】
css animation 平移,CSS动画相关（打字动画、逐帧动画、环形路径平移）
借鉴下
https://blog.csdn.net/weixin_39609622/article/details/119368065
要实现这种效果，你可以在点击按钮时改变元素的 class，然后在 css 中定义不同的动画样式。
例如，在你的 html 中，你可以有多个元素，每个元素都有一个基本的样式，同时还有一个可以在点击按钮时通过改变 class 实现平移的样式：
<style>
.element {
/* 基本样式 */
}
.element.translate {
/* 平移动画样式 */
animation: translate 0.5s;
}
@keyframes translate {
from {
/* 动画起点 */
}
to {
/* 动画终点 */
}