                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3图片动态提示效果

求解,八张动画图HTML&CSS源代码如下。用火狐打开动画效果有但是闪屏，不能正常显示；用谷歌可以，但是也会经常卡死！

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" >
    <title>图片动画</title>
    <link rel="stylesheet" href="stylesheet/style.css"/>
</head>
<body>
<figure class="test1">
    <img src="images/1.png" alt="1" />
    <figcaption>
        <h2>平移动画</h2>
        <p>苏州</p>
        <p>江南水乡</p>
        <p>小美培</p>
    </figcaption>
</figure>
<figure class="test2">
    <img src="images/2.jpg" alt="2"/>
    <figcaption>
        <h2>旋转动画</h2>
        <p>飞来飞去</p>
        <div></div>
    </figcaption>
</figure>
<figure class="test13">
    <img src="images/3.jpg" alt="3"/>
    <figcaption>
        <h2>扭曲动画</h2>
        <p>斜切，卧倒，起立</p>
    </figcaption>
</figure>
<figure class="test4">
    <img src="images/4.jpg" alt="4"/>
    <figcaption>
        <h2>缩放动画</h2>
        <p>放大，放小</p>
        <div></div>
    </figcaption>
</figure>
<figure class="test5">
    <img src="images/5.jpg" alt="5"/>
    <figcaption>
        <h2>缩放动画</h2>
        <p>综合</p>
        <div></div>
    </figcaption>
</figure>
<figure class="test6">
    <img src="images/6.jpg" alt="6"/>
    <figcaption>
        <h2>井字格</h2>
        <p>缩放</p>
        <div class="line1"></div>
        <div class="line2"></div>
    </figcaption>
</figure>
<figure class="test7">
    <img src="images/6.jpg" alt="7"/>
    <figcaption>
        <h2>斜三角</h2>
        <p>斜三角</p>
        <div></div>
    </figcaption>
</figure>
<figure class="test8">
    <img src="images/6.jpg" alt="8"/>
    <figcaption>
        <div>
            <h2>CSS3图片动态提示效果</h2>
            <p>实用的CSS3图片动态提示效果</p>
        </div>
    </figcaption>
</figure>
</body>
</html>

@charset "UTF-8";
body,figure,img,figcaption,h2,p{margin: 0;padding: 0;}
figure{
    position: relative;
    overflow: hidden;
    float: left;
    width: 33.33%;height: 350px;
}
figure img{
    width: 450px;height: 350px;
    opacity: 0.8;
    transition:all 0.35s;
}
figure figcaption p,h2,div,span{transition:all 0.35s;}
figcaption{
    position: absolute;
    top: 0;left: 0;
    font: 16px "MICROSOFT YAHEI";color: #ffffff;
}
@media screen and (min-width: 1201px){
    figure{width: 33.33%;}
}
@media screen and (min-width:801px) and (max-width: 1200px){
    figure{width: 50%;}
}
@media screen and (max-width: 800px){
    figure{width: 100%;}
}
.test1{background: #2f0000;}
.test1 figcaption{padding: 20px;}
.test1 figcaption p{
    background-color: #ffffff;
    margin: 3px;
    color: #666666;
    text-align: center;
    transform:translate(-120px,0px);
}
.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.10s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;}
.test1:hover figcaption p{transform:translate(0px,0px);}
.test1:hover img{
    opacity: 1;
    transform:translate(-50px,0);
}

.test2{background: #46973f;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin-top: 15%;margin-left: 15%;}
.test2 figcaption p{margin-left: 15%;transform:translate(0px,50px);opacity: 0;}
.test2 figcaption div{
    position: absolute;
    top: 10%;left: 10%;
    width: 80%;height: 80%;
    border: 2px solid #ffffff;
    transform:translate(0px,-350px) rotate(0deg);
}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}
.test2:hover figcaption p{transform:translate(0px,0px);opacity: 1;}

.test3{background: #002e00;}
.test3 figcaption{top:30%;left: 15%;}
.test3 figcaption h2{
    transform:skew(90deg);
}
.test3 figcaption p{
    transform:skew(90deg);
    transition-delay:0.1s;
}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{
    transform:skew(0deg);
}
.test3:hover figcaption p{
    transform:skew(0deg);
}

.test4{background: #1a4613}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption div{
    position: absolute;
    top: 10%;left: 10%;
    width: 80%;height: 80%;
    border: 2px solid #ffffff;
    transform:scale(1,1);
    opacity: 0;
}
.test4 figcaption h2{margin-top: 15%;margin-left: 15%;}
.test4 figcaption p{margin-top:5px;margin-left: 15%;}
.test4:hover img{opacity: 0.6;}
.test4:hover figcaption h2{
    transform:scale(1.2,1.2);
    margin-top: 20%;margin-left: 30%;
}
.test4:hover figcaption p{
    transform:scale(1.2,1.2);
    margin-left: 30%;
}
.test4:hover div{transform:scale(0.8,0.8);opacity: 1;}

.test5{background: #36460c}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption div{
    position: absolute;
    top: 10%;left: 10%;
    width: 80%;height: 80%;
    border: 2px solid #ffffff;
    transform:scale(1.2,1.2) rotate(0deg);
    opacity: 0;
}
.test5 figcaption h2{
    margin-top: 15%;margin-left: 15%;
    transform:scale(1.2,1.2) skew(90deg);
}
.test5 figcaption p{
    margin-top:5px;margin-left: 15%;
    transform:scale(1.2,1.2) skew(90deg);
}
.test5:hover img{
    opacity: 0.6;
    transform:scale(1.2,1.2);
}
.test5:hover figcaption h2{transform:scale(1,1) skew(0deg);}
.test5:hover figcaption p{transform:scale(1,1) skew(0deg);}
.test5:hover div{
    transform:scale(1,1) rotate(360deg);
    opacity: 1;
}

.test6{background: #ddb31d}
.test6 figcaption{width: 100%;height: 100%;}
.test6 figcaption h2{
    margin-top: 15%;margin-left: 15%;
    transform:scale(1.2,1.2);
}
.test6 figcaption p{
    margin-top:5px;margin-left: 15%;
    transform:scale(1.2,1.2) translate(0,50px);
    opacity: 0;
}
.test6 figcaption .line1{
    position: absolute;
    top: 5%;left: 10%;
    width: 80%;height: 90%;
    border-left: 2px solid #ffffff;border-right: 2px solid #ffffff;
    transform:scale(1,0);
}
.test6 figcaption .line2{
    position: absolute;
    top: 10%;left: 5%;
    width: 90%;height: 80%;
    border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;
    transform:scale(0,1);
}
.test6:hover img{opacity: 0.6;}
.test6:hover figcaption h2{transform:scale(1,1);}
.test6:hover figcaption p{transform:scale(1,1) translate(0,0);opacity: 1;}
.test6:hover figcaption div{transform:scale(1,1);}

.test7{background: #ddb31d}
.test7 figcaption{width: 130%;height: 100%;}
.test7 figcaption div{
    position: absolute;
    top:0;left: 0;
    width: 100%;height: 100%;
    background: #ffffff;
    opacity: 0.5;
    transform: translate(0,100%) rotate(0deg);
    transform-origin:left top;
}
.test7 figcaption h2{
    position:absolute;
    margin:15% 0 0 10%;
    opacity:0;
}
.test7 figcaption p{
    position:absolute;
    margin: 50% 0 0 50%;
    z-index:9999;
    opacity:0;
    color:#000;
}
.test7:hover figcaption div{
    transform:translate(0,100%) rotate(-15deg);
    opacity: 0.8;
}
.test7:hover img{opacity:0.6;transform:translate(0,-10px);}
.test7:hover figcaption h2{ opacity:1; transition-delay:0.2s;}
.test7:hover figcaption p{ opacity:1; transition-delay:0.3s;}

.test8{background: #ddb31d}
.test8 figcaption{width: 100%;height: 100%;}
.test8 figcaption div{
    position: absolute;
    top:0;left: 0;
    width: 100%;height: 100%;
    box-sizing: border-box;
    padding: 0 20%;
    background: #ffffff;
    opacity: 0.5;
    transform: translate(0,70%);
}
.test8 figcaption h2{
    position:absolute;
    margin:5% 0;
    color:#000;
}
.test8 figcaption p{
    position:absolute;
    margin: 25% 0;
    color:#000;
}
.test8:hover figcaption div{
    transform:translate(0,25%);
    opacity: 0.8;
}
.test8:hover img{opacity:0.6;}