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

animation问题

很奇怪，我做的P标签进来的时候是一个一个进来的，但是隐藏的时候都是同时消失的，是不是什么属性没加上？

Darcy2015

2015-09-19

源自：CSS3图片动态提示效果 3-1

关注问题我要回答

780

操作

收起

2 回答

Darcy2015 提问者
2015-09-19

用sass写的

@charset "UTF-8";
@import "reset.css";

*{
    margin: 0;
    padding: 0;
}

.animation{

    background: #ffffff;
    font-size: 62.5%;

    figure{
        float: left;
        width: 33.33%;
        overflow: hidden;
        position: relative;
        transition: all 0.35s;

        img{
            display: block;
            width: 100%;
            opacity: 0.8;
            transition: all 0.35s;
            transform: translate(0, 0);
        }
    }

    figcaption{
        position: absolute;
        top: 20px;
        left: 20px;

        p{
            background: #f1f1f1;
            color: #FF7256;
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            margin: 10px 0;
            transition: all 0.35s;
            transform: translate(-180px, 0);
        }

    }

    .test:hover{
        img{
            opacity: 0.2;
            transform: translate(-50px, 0);
        }

        figcaption{
            p{
               transform: translate(0, 0);
            }
            p:nth-of-type(1){transition-delay: 0.05s;}
            p:nth-of-type(2){transition-delay: 0.1s;}
            p:nth-of-type(3){transition-delay: 0.15s;}
        }

    }

}

@media screen and (max-width: 600px) {
    .animation figure{
        width: 100%;
    }
}

@media screen and (min-width:601px) and (max-width:1000px) {
    .animation figure{
        width: 50%;
    }
}

@media screen and (min-width: 1001px) {
    .animation figure{
        width: 33.33%;
    }
}