一、平移动画有关的CSS3属性以及相关的属性描述
1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度，宽度，颜色等）。
2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬）。
3、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率（例如：先快后慢，先慢后快，匀速变化等等）。
4、transition-delay：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。
先来三张效果图，由于是一个动态的过程，这里只发三张动态瞬间图片：
二、效果图
图片左侧的文字还没有进入
图片上的四行文字正在逐条进入
图片上四行文字完成动画效果
三、示例代码
HTML5全部代码：
复制代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>index</title>
<link href=”css/main.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<figure class=”test1″>
<img src=”img/dengfuru3.jpg” class=”test1-img”>
<figcaption>
<h2><font color=”white”>邓福如</font></h2>
<p>《如果有如果》</p>
<p>《前面路口停》</p>
<p>《邓大福是一只猫》</p>
<p>《Nothing On You》</p>
</figcaption>
</figure>
</body>
</html>
CSS3样式代码：
复制代码
/*清原有的默认样式*/
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}</p>
<p>/*设置图片样式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
}</p>
<p>figure{
position: relative;
overflow: hidden;/*使用overflow属性设置成hidden，图片超出容器的部分就会自动隐藏*/
width: 100%;
float: left;
}</p>
<p>figcaption{
position: absolute;
top:0;
left: 0;
}</p>
<p>.test1{
background-color: #2F0000;
}</p>
<p>.test1 figcaption {
margin: 20px;
