利用CSS3实现平移动画效果示例代码超炫CSS3六边形菜单动画特效源码纯DOM+CSS3实现简单的小风车动画CSS3实现复选框动画特效示例代码 利用CSS3实现单选框动画特效示例代码CSS3中动画属性transform、transition和animation属性的区别css3基于animation实现旋转的摩天轮动画特效源码纯CSS3炫酷3D星空动画特效源码jQuery+css3实现的大眼睛萌蛋动画特效源码CSS3 3D制作实战案例分析利用CSS3实现炫酷的飞机起飞动画

/*设置图片样式*/
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
}

figure{
position: relative;
overflow: hidden;/*使用overflow属性设置成hidden，图片超出容器的部分就会自动隐藏*/
width: 100%;
float: left;
}

figcaption{
position: absolute;
top:0;
left: 0;
}

.test1{
background-color: #2F0000;
}

.test1 figcaption {
margin: 20px;
}

/*对test1的figcaption下面的p标签进行样式设计*/
.test1 figcaption p{
background-color: #FFF;
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}

/*给figure下面的所有的p标签加上动画延时效果*/
figure figcaption p{
transition: transform 0.35s;
}

/*将test1里面的文字内容移出页面*/
.test1 figcaption p{
transform: translate(-400px,0px);
}

/*当鼠标滑过外部容器figure的时候改变p标签和h2标签的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第一个p标签加延时，每个P标签的延时长短不同就决定了他们是先后进入页面的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*当鼠标放在图片上0.05秒以后开始向右移动进入页面*/
}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第二个p标签加延时*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*当鼠标放在图片上0.10秒以后开始向右移动进入页面*/
}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第三个p标签加延时*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*当鼠标放在图片上0.15秒以后开始向右移动进入页面*/
}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第四个p标签加延时*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*当鼠标放在图片上0.2秒以后开始向右移动进入页面*/
}