前端面试题HTML+CSS基础篇——transition和animation的区别

transition和animation的区别分析

transition和animation是通过css3实现动画的两种方式，但是两者存在着什么区别呢

首先先分别介绍一下transition和animation具体如何实现动画吧！

1. transition

举个例子：

.box{
   width: 100px;
   height:100px;
   transition: width height 2s;
 }
 .box:hover{
    width:200px;
    height:200px;
 }

当鼠标悬停在类名为box的盒子上时，盒子的宽度和高度会在两秒内变成200px

transition: property duration timing-function delay;

• property：指定CSS属性的name，transition效果
• duration：transition效果需要指定多少秒或毫秒才能完成
• timing-function：指定transition效果的转速曲线，默认是 “ease”
• delay：定义transition效果开始的时候

注意：transition-duration为必须值，否则持续时间为0，transition不会有任何效果。

2. animation

.box{ 
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

• name：规定 @keyframes 动画的名称。
• duration：动画指定需要多少秒或毫秒完成
• timing-function： 规定动画的速度曲线，默认是 “ease”
• delay：设置动画在启动前的延迟间隔，默认是 0
• iteration-count：定义动画的播放次数(infinite为循环播放)（默认为1）
• direction：指定是否应该轮流反向播放动画，默认是 “normal”
• fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• play-state：指定动画是否正在运行或已暂停，默认是 “running”

3. 二者的区别

transition和animation大部分属性是相同的，他们都是随时间改变元素的属性值，主要区别在于以下几点：

• transition需要触发一个事件才能改变属性，而animation不需要触发任何事件就会随时间改变属性值
• transition为两帧，而animation可以是一帧一帧的，跟随自定义动画而言，自定义动画定义了多少帧就执行多少帧
• animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次
• 性能方面：在使用 aniamtion 的时候可以改变很多属性，比如 width、height、postion 等等这些改变文档流的属性的时候就会引起页面的回流和重绘，对性能影响比较大，而使用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等，不会生成新的位图，就不会引起页面的重绘了

有关于回流和重绘的内容可以查看一下昨天的博客内容