CSS3动画（简单动画的实现，如旋转等）
依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation
transition ：'过度'
定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果，且必须需要一个触发事件，是动态改变的。
要实现这一点，必须规定两项内容：
* 指定要添加效果的CSS属性
* 指定效果的持续时间
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s; // 指定属性， 持续时间， 过度方式， 延时时间
}
transform ：'转换' (2D/3D) 是静态的某些效果实现
定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。
- 旋转 transform: rotate(30deg);（正数表示顺时针）
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
- 平移 transform:translate(50px,100px);水平向右移动50px,垂直向下移动100px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
- 缩放 transform: scale(2,3);scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
.scale {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
.........
animation ：'动画'(不需要触发事件，是不断变化的一种动画效果）
动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括 animationname ， animation-duration 、 animation-timing-function 、 animationdelay 、 animation-iteration-count 、 animation-direction
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
