一、transition（过渡、转变的意思）
成都创新互联公司为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到网站建设、成都做网站， 我们的网页设计师为您提供的解决方案。
transition 属性是一个简写属性，用于设置四个过渡属性：
1. transition-property：设置过渡效果的属性名称（默认值是all）；
2. transition-duration：设置过渡完成所需要的时间（默认值是0）；
3. transition-timing-function：设置过渡速度效果曲线（默认值是ease）；
4. transition-delay：设置过渡的开始时间（默认值是0）；
语法：transition: property duration timing-function delay;
注意：这里transition-duration是需要填的，不填默认为是0，没有过渡效果。
二、animation（动画、活力的意思）
animation 属性也是一个简写属性，用于设置六个动画属性：
1. animation-name：设置绑定到选择器的@keyframem名称（默认值是none）；
2. animation-duration：设置完成动画所花费的时间（默认值是0）；
3. animation-timing-function：设置动画的速度曲线（默认值是ease）；
4. animation-delay：设置动画延迟几秒开始（默认值是0）；
5. animation-iteration-count：设置动画播放的次数（默认值是1）；
6. animation-direction：设置时候轮流反向播放动画（默认值是normal）；
语法：animation: name duration timing-function delay iteration-count direction;
注意：这里animation-duration是需要填的，不填默认是0，就不会播放动画了。
三、区别
1. transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；
2. animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。