CSS transition与transform使用分析

最新推荐文章于 2025-06-09 17:13:55 发布

原创最新推荐文章于 2025-06-09 17:13:55 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #transition

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨CSS3的transition和transform属性，通过实例演示两者的使用及区别，讲解如何运用transition实现平滑属性变化，以及transform对元素进行2D或3D的空间变换，最后通过一个小球动画案例展示两者的综合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始接触css动画的同学对于css33的transition属性以及transform属性会产生混淆，今天就借助小的demo来探讨一下这两者之间的关联和区别，希望可以让你有个更加清晰的认识；

首先我们来看一下什么是transition
在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。，transition为我们的属性变化提供了过渡时间，让变化可以平滑执行；

下面这个例子当鼠标放上去时，图片宽高瞬间增大；

    img{
        height:15px;
        width:15px;
    }
    
    img:hover{
        height: 450px;
        width: 450px;
    }

当我们为img设置transition属性时，宽高变化会在1s内执行完成，而不是瞬间；

img{
    transition: 1s;
}

什么是transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。简而言之就是对元素进行位置形状的变化；

这里我们提供一个简单的例子
旋转 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

了解了这两个的基本概念，我们就结合一个实例进行实战分析；

首先看效果图：
transition

当我们点击红色球时，触发动画，再次点击收回小球，看上去是不是很棒；下面我们结合代码进行分析：
这里是我们的一些样式文件，放在这里供大家参考，方便下面的讲解；

    <style type="text/css">
        .circle{
            width: 20px;
            height: 20px;
            top:16px;
            left: 16px;
            border-radius: 50%;
            background: #4caf50;
            position: absolute;
            opacity: 0;
            text-align: center;
        }
        .add{
            width: 40px;
            height: 40px;
            position: relative;
            border-radius: 50%;
            background: red;
        }
        .one{
            transition: all 0.2s ease
        }
         .two{
            /*延时 0.1s 过渡执行0.2s*/
            transition: all 0.2s 0.1s ease
        }
        .three{
            transition: all 0.1s 0.2s ease
        }
    </style>
<body style="box-sizing: border-box">
    <div class="add">
        <div class="circle one">1</div>
        <div class="circle two">2</div>
        <div class="circle three">3</div>
</div>
</body>

动画的实现主要分为两部分，小球弹出和收回，当我们首次点击时，对小球进行translate3d(x,y,z)的变换，因为我们已经在样式文件定义每个小球的执行过度时间,初始位置，以及相应的延时，所以我们的位置变化会是过渡效果，而不是瞬间执行；小球收回原理与之类似。我们不在累述;
下面看实现代码：

<script type="text/javascript">
    var flag=true;
    var add=document.getElementsByClassName("add")[0]; 
    var circle=document.getElementsByClassName("circle");
    add.onclick=function(){
    if(flag){
        // flag为true时，对小球进行展开，执行translate
        flag=false;
        circle[0].style.transform="translate3d(20px, 80px, 0)";
        circle[1].style.transform="translate3d(50px, 60px, 0)";
        circle[2].style.transform="translate3d(70px, 20px, 0)";
    //  透明度从0变为1，并且进行了小球颜色渐变
    for(var i=0;i<circle.length;i++){
        circle[i].style.opacity="1";
        circle[i].style.background="#da9063";
    }
    }
    else
    {
        // flag为false，小球收回去，并且设置透明度渐变和颜色渐变
       flag=!flag;
       // 再次点击将小球收回原来位置，
       // 这里复原用的是translate3d(0px, 0px, 0)，
       // 这里不是在移动x,y了；
        circle[0].style.transform="translate3d(0px, 0px, 0)";
        circle[1].style.transform="translate3d(0px, 0px, 0)";
        circle[2].style.transform="translate3d(0px, 0px, 0)";    
        for(var i=0;i<circle.length;i++)
    {
        circle[i].style.opacity="0";
        circle[i].style.background="#4caf50";
    }
    }
    // 用于测试时获取点击div的位置； 
    var rect = add.getBoundingClientRect();
    console.log(rect.top+"  "+rect.left);
    }