一、CSS3过渡： CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上  规定效果的时长   配合hover效果使用（触发）  如果时长未规定，则不会有过渡效果，因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：例：    div{transition: width 2s;-moz-transition: width 2s;    /* Firefox  */-webkit-transition: width 2s;    /* Safari 和 Chrome */-o-transition: width 2s;    /* Opera */} 二、CSS3动画： @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。  当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称  规定动画的时长   例;改变背景和位置：div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-moz-keyframes myfirst /* Firefox */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}@-o-keyframes myfirst /* Opera */{0%   {background:red;}25%  {background:yellow;}50%  {background:blue;}100% {background:green;}}