transition与animation的区别

Bertha 。 2023-05-22 06:55 19阅读 0赞

我们为页面设置动画时，往往会用到transition还有animation以及transfrom属性或者用到js。

其实通常情况下，对于使用js我们更加倾向于使用css来设置动画。

transfrom就不用说了，它本身就一个css属性。

transition 是可以为一个或者多个用数值表示的CSS属性发生变化时添加动画效果。

.demo{ 
    
    overflow: hidden;
    
    width: 100px;
    
    height: 100px;
    
    position: relative;
    
    }
    
    
    
    .aaa{  width: 100%; height: 50px;
    
    position: absolute; bottom: -50px; opacity: 0;
    
    -webkit-transition: all 0.85s ease; -moz-transition: all 0.85s ease; -o-transition: all 0.85s ease; -ms-transition: all 0.85s ease; transition: all 0.85s ease; }
    
    
    
    .demo:hover .aaa{ 
    
    opacity: 1;
    
    bottom: 0;
    
    }

**transition的属性有：**

*  transition-property（css属性name，transition效果）、
 *  transition-duration（动画持续多少秒）、
 *  transition-timing-function（动画的变化过程速度曲线）、
 *  transition-delay（动画开始的时候，也就是延迟多少秒）

相对于animation,transition从某种层度上讲，动画控制的更粗一些，它**唯一能定义动画变化过程效果**的便是**transition-timing-function**属性，

而animation提供的**keyframe**方法，可以让你手动去指定每个阶段的属性。此外animation还封装了**循环次数，动画延迟，反向循环**等功能,更加自由和强大。

## animation ： ##

**name** 设置动画的名称，  
**duration** 设置动画完成的周期，  
**timing-function** 设置动画的速度曲线，  
**delay** 设置动画什么时候开始，  
**iteration-count** 设置动画播放的次数，  
**direction** 规定下一个周期是否逆向的播放，  
**play-state** 动画是否正在进行或者暂停，  
**fill-mode** 设置动画停了之后位置什么状态

## transition ： ##

**property** 去设置过渡效果的属性名称，  
**duration** 设置过渡效果的周期，  
**timing-function** 规定速度效果的速度曲线，  
**delay** 设定过渡效果什么时候开始；

## 区别： ##

1、transition 是过渡，是**样式值的变化的过程**，**只有开始和结束**；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；