contact——toolofna

效果

分析

一个ul里面有3个li，一开始li的宽度和高度都为0，然后先变宽度，再变高度。

计算好transition的动画延迟时间，就能达到多个元素过渡动画的自然顺滑。

源码

html

<ul class="offices">
        <li>
            <h1><span>LA</span></h1>
            <h2>Los Angeles</h2>
            <div class="office-details">
                <a class="map" href="javascript:void(0)">VIEW MAP</a>
                <a class="info" href="javascript:void(0)">2210 Broadway Santa Monica, CA 90404</a>
                <h4>p: 310.453.9244</h4>
                <h4>f: 310.453.4185</h4>
            </div>
        </li>
        <li>
            <h1><span>LN</span></h1>
            <h2>London</h2>
            <div class="office-details">
                <a class="map" href="javascript:void(0)">VIEW MAP</a>
                <h4>p: +44 7956 337 624</h4>
                <h4>Debbie Turner</h4>
            </div>
        </li>
        <li>
            <h1><span>FR</span></h1>
            <h2>France</h2>
            <div class="office-details">
                <a class="map" href="javascript:void(0)">VIEW MAP</a>
                <h4>p: +44 7956 337 624</h4>
                <h4>Debbie Turner</h4>
            </div>
        </li>
    </ul>

css

#contact ul.offices{
    position: relative;
    left: 50%;
    margin-top: 212px;
    overflow: auto;
    width: 1045px;
    margin-left: -522.5px;
}
#contact ul.offices li{
    display: block;
    float: left;
    width: 306px;
    height: 460px;
    text-transform: uppercase;
}
#contact ul.offices li:nth-child(2){
    margin-right: 55px;
    margin-left: 55px;
}
#contact ul.offices li h1{
    position: relative;
    overflow: hidden;
    width: 0;
    height: 8px;
    text-align: left;
    border-bottom: #000000 solid 8px;
    line-height: 100%;
    transform-origin: bottom;
    transition: width .5s ,height .5s .5s;
}
#contact ul.offices li h2{
    margin: 20px 0 20px 0;
    font-size: 40px;
    color: #e74c4c;
    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
    opacity: 0;
    transition: opacity .5s .6s;
}
#contact ul.offices li .office-details{
    opacity: 0;
    transition: opacity .5s .8s;
}
#contact ul.offices li .office-details a.map{
    display: block;
    font-size: 16px;
    background: #000;
    letter-spacing: 2px;
    color: white;
    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
    margin: 30px 0 30px 0;
    padding: 8px 15px;
    width: 100px;

}

#contact ul.offices li .office-details h4, #contact ul.offices li .office-details a.info{
    display: block;
    font-size: 14px;
    line-height: 22px;
    font-family: "LetterGothicStd-Bold", "Lucida Console", Monaco, monospace;
    color: #000000;
    max-width: 275px;
}
#contact ul.offices li h1 span{
    display: block;
    position: absolute;
    font-size: 243px;
    line-height: 100%;
    height: 0;
    letter-spacing: -3px;
    color: #000000;
    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
    margin-left: -19px;
    font-weight: 500;
}

toolofna

http://toolofna.com/#!/contact