网站中如果有动画效果可以使网站显得与众不同更吸引人的注意，实现动画效果有2种方式，一是js实现，二是使用css实现。css3中实现动画效果有2种方式分别为transition过渡和animation动画，相信有很多伙伴并不清楚他们有什么区别，今天小编来给大家介绍一下。

animation属性类似于transition，他们都是随着时间改变元素的属性值，  

其主要区别在于：

transition需要触发一个事件才会随着时间改变其CSS属性；多用在页面元素鼠标经过，鼠标点击，鼠标离开等时发生动画效果。

例如一个div初始宽度为100px，实现效果鼠标经过时宽度变为200px;实现代码如下：

1. div
2. {
3. width:100px;
4. transition: width 2s;
5. -moz-transition: width 2s; /* Firefox 4 */
6. -webkit-transition: width 2s;/* Safari 和 Chrome */
7. -o-transition: width 2s;/* Opera */
8. }
9. div:hover{width:300px;}

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上，规定效果的时长。

animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果 ，多用在页面初始打开，或者div进入浏览器可视区域时的动画效果。

1）animation动画不需要事件触发，transition过渡需要。

2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

例如动态改变一个div背景，初始div有个背景色，当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变。

首先，给div规定动画的名称和动画的时长，名字为myfirst，动画时长5s。

1. div
2. {
3. animation: myfirst 5s;
4. -moz-animation: myfirst 5s;/* Firefox */
5. -webkit-animation: myfirst 5s;/* Safari 和 Chrome */
6. -o-animation: myfirst 5s; /* Opera */
7. }

然后添加动画效果

1. @keyframes myfirst
2. {
3. 0% {background: red;}
4. 25% {background: yellow;}
5. 50% {background: blue;}
6. 100% {background: green;}
7. }
8. @-moz-keyframes myfirst /* Firefox */
9. {
10. 0% {background: red;}
11. 25% {background: yellow;}
12. 50% {background: blue;}
13. 100% {background: green;}
14. }
15. @-webkit-keyframes myfirst /* Safari 和 Chrome */
16. {
17. 0% {background: red;}
18. 25% {background: yellow;}
19. 50% {background: blue;}
20. 100% {background: green;}
21. }
22. @-o-keyframes myfirst /* Opera */
23. {
24. 0% {background: red;}
25. 25% {background: yellow;}
26. 50% {background: blue;}
27. 100% {background: green;}
28. }

总结只要记住一点就行：如果动画需要事件去触发的话使用transition，比如网页常见的鼠标放到元素时，元素发生大小，颜色，位置之类的变化。如果不需要事件去触发的话用animation比如幻灯片切换，页面打开元素从左右上下缓慢进入效果，元素由不显示到缓慢显示效果等。