简单通过Css3 图片动画

 1 body,figure,figcaption,h2,p,img{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 figure{
 6     width: 33.33%;
 7     /*position: absolute;*/
 8     height: 350px;
 9     overflow: hidden;    /*图片溢出的部分隐藏*/
10     /*float: left;*/
11 }
12 img{
13     opacity: 0.8;               /*透明度80%*/
14     transition: all 0.35s;       /*所有动作 0.35秒*/
15 }
16 h2,p{
17     text-align: center;
18     margin: 10px;
19 }
20 p{
21     background-color:white;
22     transform: translate(-120px,0px);         /*所有的p元素平移-120px*/
23 }
24 h2{
25     color: white;
26 }
27 figcaption{
28     position: absolute;
29     top:0;
30     left: 0;
31 }
32 .\.test1{
33     background: #2f0000;
34 }
35 .\.test1:hover figcaption p{
36      transform:translate(0px,0px);              /*当悬浮的时候 恢复到默认状态*/
37 }
38 .\.test1 figcaption p:nth-of-type(1){
39     transition-delay: 0.05s;                   /*动画所执行的时间*/
40 }
41 .\.test1 figcaption p:nth-of-type(2){
42     transition-delay: 0.1s;
43 }
44 .\.test1 figcaption p:nth-of-type(3){
45     transition-delay: 0.15s;
46 }
47 .\.test1:hover img{
48     transform:translate(-50px,0px);                 /*当悬浮的时候平移-50px*/
49     opacity: 0.5;                                   /*透明度50%*/
50 }
51 figure figcaption p,h2{
52     transition: all 0.35s;                  /*所有动画执行0.35s秒*/
53 }