weixin_45840746 2022-12-27 13:13 采纳率: 34.8%
浏览 156
已结题

css3: animation多个元素平移

我在使用css3 animation时出现问题，想请教一下
现在有多个元素 点击按钮一个元素translate3d平移到屏幕中心，停留在最后状态，再次点击按钮这个元素回去，另一个元素同时平移。

  • 写回答

7条回答 默认 最新

  • zhu_xiaotong 2022-12-27 13:43
    关注

    你要的是这样的吗？

    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

  • CSS3中Animation属性的使用详解
    2020-09-24 23:53
    在CSS3中，我们通过`@keyframes`规则来创建关键帧，定义元素从开始到结束之间的多个样式变化点。 `@keyframes`的语法如下： ```css @keyframes IDENT { from { /* 0% 的样式 */ Properties: Properties value; ...
  • 利用css3-animation实现逐帧动画效果
    2020-09-24 22:52
    本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果，这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先，我们需要了解 CSS3 的 `@keyframes` 规则，它是创建动画的核心。`@keyframes` 允许...
  • css animation 平移,CSS动画相关（打字动画、逐帧动画、环形路径平移）
    2021-08-03 18:57
    weixin_39609622的博客 一、 逐帧动画很多时候，我们需要一个很难只通过CSS属性来实现的动画，比如一个复杂的进度提示框，在这样场景下基于图片的逐帧动画才是王道。看到动画，你可能会想：[直接用GIF不就得了嘛，搞这么复杂的CSS干嘛]。...
  • 10分钟入门CSS3 Animation
    2020-09-22 10:47
    `transform`属性是用来转换HTML元素的，它包含多个子属性，如`translate`（平移）、`scale`（缩放）、`rotate`（旋转）等，这些都是在三维空间内定义的。通过这些`transform`函数，开发者可以轻松地对元素进行位置...
  • 纯CSS3绘制砖块堆栈小游戏代码
    2021-06-24 11:24
    同时，为了提高性能和减少网络请求，通常会使用CSS Sprite技术将多个小图标合并为一张大图，然后通过背景定位显示需要的部分。 总之，【纯CSS3绘制砖块堆栈小游戏代码】展示了CSS3的强大潜力，不仅能够实现美观的...
  • css3的动画特效之动画序列（animation）
    2020-09-24 19:49
    首先，animation属性是CSS3动画的核心，它集成了多个动画相关的属性，如animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction等。...
  • css3绘制2D宇宙星空元素背景动画特效
    2020-06-11 09:25
    通过组合不同的CSS属性，如`transform`（旋转、缩放、平移）和`opacity`（透明度），可以进一步增强元素的视觉效果。 4. **背景和定位**：为了构建一个深邃的宇宙背景，可以使用渐变色作为背景，比如从黑色到深蓝色...
  • 纯css3实现多个线性旋转加载动画特效源码.zip
    2022-10-31 23:55
    【标题】中的“纯css3实现多个线性旋转加载动画特效源码”表明这是一个使用CSS3技术制作的、包含多种线性旋转加载效果的代码资源。这类加载动画通常用于网站或应用中，显示数据正在加载或者处理过程，给用户一个视觉...
  • css3d动画：平移、旋转、缩放
    2022-10-05 15:38
    陌依依的博客 1、前言： 3d比2d多了一个z轴，这个z轴是垂直我们屏幕的方向，指向我们人眼的是正轴，远离人眼的是负轴，图示如下： 2、景深设置和3d平移 当我们在z轴上向正轴方向上移动物体，也就是向我们眼前移动物体，结果不会...
  • JS+CSS3多个文字变形切换特效.zip
    2023-10-05 23:33
    【标题】"JS+CSS3多个文字变形切换特效"是一个基于JavaScript和CSS3技术实现的网页特效，旨在为用户提供一种动态、吸引人的文字展示方式。这个特效允许文字在不同的形态间进行平滑过渡，增强用户体验，使网页更具...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 1月6日
  • 已采纳回答 12月29日
  • 创建了问题 12月27日