标题中的两个属性都可以实现动画效果，某些场景下两者表现几乎一样。
我们知道属性的命名与其功能密切相关，先从两者的名称入手。
（1）.animation：具有”动画”和”动画片”的意思，名副其实此属性的确可以定义动画效果。
（2）.transition：具有”过渡”的意思，规定属性从一个值过渡的另一个值，虽然也具有动画效果，但是和真正的动画效果效果比太逊色了，因为它只有初始和结束两个状态，所以”过渡”是对其更为恰当的描述。
一.动画状态的区别：
animation动画可以通过@keyframes属性对动画进行更为精细的控制，设置多个状态。
但是transition属性则只有两个状态，起始状态与结束状态。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>animation与transition区别</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
top:100px;
animation:theanimation 4s infinite alternate;
}
@keyframes theanimation{
0%{left:0px;background:red;}
25%{left:30px;background:blue;}
50%{left:60px;background:yellow;}
75%{left:120px;background:green;}
100%{left:240px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码分析如下：
（1）.一次完整的动画时长是4秒。
（2）.通过@keyframes属性将动画整个时长分为4份，在各自的时间段对动画进行控制。
（3）.也就是说animation动画可以具有多个状态，但是transtion动画只有两个状态，起始状态与结束状态。
二.子属性的数量不同：
两个属性都是复合属性，包含有若干个子属性，但是数目不相同。
当然子属性数量不同会对效果有影响，很容易区分，本文不做更多介绍。
三.触发时机不同：
两个属性的触发时机有很大的不同，animation好比是一个自执行函数，只要定义好，立马生效触发动画。
transition则像是一个事件处理函数（事件监听器），只有它监听的属性值发生改变，动画效果才会生效。
很容易理解，下面再来通过代码实例进行一下演示：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>animation与transition区别</title>
<style>
#ant{
width:100px;
height:100px;
background:blue;
cursor: pointer;
transition:width 2s;
}
#ant:hover{
width:500px;
}
</style>
</head>
<body>
<div id="ant"></div>
</body>
</html>
代码分析如下：
（1）.通过transition属性监听div元素width属性的变化，动画在两秒内完成。
（2）.当鼠标悬浮于div之上的时候，设置width的宽度为500px，宽度的变化此时被transition坚挺到。
（3）.于是开始动画效果，宽度会进行平滑的过渡。
但是animation属性并不具有上述监听效果，一旦定义，动画效果立马生效，与width或者height等属性一个道理。
可能有朋友对上述结论有所怀疑，认为下面这种效果也是监听行为，其实只是一种错觉而已，代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com.com/" />
<title>animation与transition区别</title>
<style>
div{
width:100px;
height:100px;
background:blue;
cursor: pointer;
}
@keyframes theanimation{
from {width: 100px;}
to {width: 500px;}
}
div:hover{
animation:theanimation 2s forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上述代码中，当鼠标悬浮的时候，能够以动画方式设置div的宽度。
貌似与前面的代码功能是一样的，也监听了”某些东西”一样，然而事实并非如此。
首先，它并没有监听属性的变化，第二个鼠标悬浮div的时候，是为div元素定义animation动画。
本文对两个属性的主要区别进行了大致的介绍。
1.《animation与transition区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《animation与transition区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/244.html