CSS3中可以实现简单的动画效果，在此之前要实现过渡效果，从一个个的小画面过度连续起来才能在人眼的视觉暂留下成为动画。
1.过渡效果的实现：transition
过渡效果用来描述两个状态间的转化过程，这两个状态是什么？转化时间有多长？由什么触发转化过程？这都是我们要考虑的问题。
| 属性 | 描述 | 使用 |
|---|---|---|
| transition | 总属性 | 属性名+持续时间+过渡函数，如：transition: all 0.5s linear; |
| transition-property | 属性名，对哪些属性名进行变化 | transition-property：color height; |
| transition-duration | 持续时间，以s为单位 | transition-duration：1s; |
| transition-timing-funtion | 过渡使用的函数 | transition-timing-funtion:linear; 函数有：linear（匀速），ease（慢快慢），ease-in(慢快)，ease-out(快慢)，ease-in-out（慢快慢） |
下面看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3过渡</title>
<style type="text/css">
#container{
margin: 0 auto;
width: 600px;
height: 500px;
background-color:#008B8B;
border-radius: 5px;
}
#main{
padding: 5px;
margin: 5px;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
border-radius: 5px;
background-color: silver;
position: relative;
top: 200px;
left: 200px;
transition:all 0.5s linear;
}
#main:hover{
color:white;
background-color: #45B823;
}
</style>
</head>
<body>
<div id="container">
<div id="main">Web Design</div>
</div>
</body>
</html>
未悬停时
鼠标悬停
2.动画效果的实现：animation
动画由一帧帧的图片连续变化而成，过程中我们要先定义动画，然后再讲他们连续起来.
(1) 定义动画：@keyframes关键帧规则
(2) 调用动画：用hover触发，animation属性来调用
animation：动画名 持续时间 动画函数 播放方式
动画名：animation-name
持续时间：animation-duration
动画函数：animation-timing-function（和transition的函数一致）
动画方式： animation-play-state（当前动画正在播放）和paused（当前动画播放完毕）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
width: 650px;
height: 470px;
border-radius: 10px;
background-color: #2F4F4F;
margin: 10px;
}
#main{
width: 500px;
height: 350px;
border-radius: 10px;
background-color: #0066FF;
position:relative;
top:50px;
left: 75px;
}
@keyframes frames{
0% {background: url("images/Weixin.png") repeat; }
100% {background: url("images/Google.png") repeat;}
50% {background:url("images/Tencent.png") repeat;}
}
#main:hover{
animation: frames 5s linear;
}
</style>
</head>
<body>
<div id="container">
<div id="main"></div>
</div>
</body>
</html>
