transition 和 animation 的区别

小草莓蹦蹦跳

已于 2023-11-07 00:16:31 修改

阅读量862

点赞数 3

分类专栏： CSS3 每日专栏文章标签：前端 javascript css3

于 2023-10-07 17:44:46 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/133644402

版权

每日专栏同时被 2 个专栏收录

226 篇文章 4 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

结论先行：

transition 和 animation 都可以实现动画效果。不同的是，

transition 是过渡属性，适用于简单的 CSS 属性变化的过渡，而且需要触发事件才会执行动画，例如鼠标移动或者点击等；

而 animation 是动画属性，适用于创建更复杂和多样化的动画效果。它不需要触发事件，它是通过关键帧（@keyframes）定义动画效果。

具体解析：

在 CSS 中，transition 和 animation 都可以用来控制元素的动态效果，但是它们在实现方式、应用场景、性能上有一些区别。

1、实现方式的区别

transition：过渡属性，强调过渡；

通过在 CSS 属性的变化过程中进行过渡，从而产生动态效果。

它的实现需要手动触发，通过一个事件（比如鼠标移动上去，焦点，点击等)才执行动画。

而且 transition 触发一次播放一次。

它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。

animation：动画属性；

需要使用 @keyframes 来注册一个动画效果，即帧来描述动画效果；

通过在关键帧（@keyframes）中定义动画状态，从而实现元素的动态变化效果。

它的实现不需要手动触发，是自动触发。可以设置很多的属性，比如循环次数，动画结束的状态等等；

它也类似于 flash 的补间动画，但是它可以设置多个关键帧 (用@keyframe定义) 完成动画。

2、应用场景的区别

transition：用于实现简单的动态效果

例如鼠标悬停在一个元素上时，该元素背景色或透明度的变化。

animation：用于实现复杂的动态效果

例如元素的旋转、缩放、平移等复杂变换，以及多个动画状态之间的切换。

3、语法结构

transition：需要指定过渡的属性、持续时间、过渡函数、延迟时间等参数：

transition-property：动画展示哪些属性，可以使用all关键字；

transition--duration：动画过程有多久；

transition-timing-function: linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等：控制动画速度变化；

transition-delay：动画延迟执行时间；

  <head>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background-color: #20f100;
        /* transition: 哪个属性运动 运动在多长时间完成 运动类型 延迟时间*/
        transition: all 1s ease-in-out 1s;
      }

      .box1:hover {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div class="box1"></div>
  </body>

animation：需要定义动画的名称、持续时间、运动曲线、动画状态等参数，例如：

animation-name：keyframes中定义的动画名称；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字（infinate）;
animation-direction：alternate(奇数次超前运行，偶数次后退运行)。
animation-fill-mode：告诉浏览器将元素的格式保持为动画结束时候的样子。

  <head>
    <style>
      .box2 {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background-color: #f19500;

        /* name duration timing-function delay iteration-count direction fill-mode; */
        animation: ANIBox 1s ease-in-out 1s infinite alternate;
      }

      @keyframes ANIBox {
        from {
          width: 200px;
          height: 200px;
        }
        to {
          width: 400px;
          height: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box2"></div>
  </body>

4、在性能方面

浏览器有一个主线程和排版线程；

主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；

我们在用使用 animation 的时候这样就可以改变很多属性，像我们改变了 width、height、position 等等这些改变文档流的属性的时候就会引起页面的回流和重绘，对性能影响就比较大；

但是我们用 transition 的时候一般会结合 transfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了。

5、总结

Transition（过渡）：

Transition 主要用于在元素状态发生变化时实现平滑的过渡效果。
Transition 可以定义元素的属性变化过程中的动画效果。
Transition 可以应用于任何 CSS 属性，并且可以指定不同的持续时间、延迟时间、过渡函数和重复次数等参数。
Transition 的实现是通过在属性值发生变化时逐步改变属性值，从而创建平滑的过渡效果。
Transition 可以通过:hover、:focus、:active 等伪类选择器或 JavaScript 控制元素状态来触发。

Animation（动画）：

Animation 主要用于创建更复杂和多样化的动画效果。
Animation 是通过定义关键帧（Keyframes）和动画属性来实现的。
Animation 可以对一个或多个属性同时进行动画处理。
Animation 可以定义动画的持续时间、延迟时间、重复次数、播放方向等。
Animation 的实现是通过在关键帧之间进行插值计算，从而创建动画效果。
Animation 可以通过添加或删除 CSS 类、通过 JavaScript 控制动画状态或使用 CSS 动画属性进行触发。

总的来说，transition 适用于实现简单的动态效果，而 animation 适用于实现复杂的动态效果。在选择使用哪种方法时，需要根据具体的需求进行判断。

小草莓蹦蹦跳

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
transition 和 animation 的区别

Transition 主要用于在元素状态发生变化时实现平滑的过渡效果。Transition 可以定义元素的属性变化过程中的动画效果。Transition 可以应用于任何 CSS 属性，并且可以指定不同的持续时间、延迟时间、过渡函数和重复次数等参数。Transition 的实现是通过在属性值发生变化时逐步改变属性值，从而创建平滑的过渡效果。Transition 可以通过:hover、:focus、:active 等伪类选择器或 JavaScript 控制元素状态来触发。
复制链接

扫一扫