CSS3过渡和动画

1.过渡
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
（1）规定您希望把效果添加到哪个
（2）CSS 属性上规定效果的时长
如果时长未规定，则不会有过渡效果，因为默认值是 0。

当鼠标经过盒子时，盒子改变，当鼠标离开时，逐渐恢复原来的样式。

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
transition:width 2s,height 2s;
}
div:hover{
width:150px;
height:300px;
transform:rotate(60deg);
}

2.动画
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
（1）规定动画的名称
（2）规定动画的时长

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
}
@keyframes myfirst
{
from { background:gray;}
to { background:blue ;}
}

必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0

div
{
width:100px;
height:200px;
border:2px solid blue;
background-color:gray;
animation:myfirst 5s;
position:relative;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}