タイムライン効果を実現するCSS3

<div class="タイムゾーン">
            <div class="time">
                <h2>2015-07-02</h2>
                <div>
                    <p>レイジイベントシーズン1</p>
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="timeLeft" style="top: 100px;">
                <h2>2015-07-02</h2>
                <div>
                    <p>レイジイベントシーズン2</p>
                    <ul>

                    </ul>
                </div>
</div>

体{
                背景: #333;
            }
            h1{
                テキスト配置: 中央;
                色:#fff;
            }
            .タイムゾーン{
                幅:6px;
                高さ: 350ピクセル;
                背景: 水色;
                マージン: 0 自動;
                上マージン:50px;
                境界線の半径: 3px;
                位置: 相対的;
                -webkit-animation: heightSlide 2s linear;
            }
            @-webkit-keyframes 高さスライド{
                0%{
                    高さ: 0;
                }
                100%{
                    高さ: 350ピクセル;
                }
            }
            .timezone:after{
                内容: '続く...';
                幅: 100ピクセル;
                色:#fff;
                位置: 絶対;
                左マージン: -35px;
                下: -30px;
                -webkit-animation: showIn 4s イージー;
            }
            .timezone .time,.timezone .timeLeft{
                位置: 絶対;
                左マージン: -10px;
                上マージン:-10px;
                幅:20px;
                高さ:20px;
                境界線の半径: 50%;
                境界線:4px実線rgba(255,255,255,0.5);
                背景: 水色;
                -webkit-transition: すべて 0.5 秒;
                -webkit-animation: 表示をイージーにします。
            }
            .timezone .time:n番目の子(1){
                -webkit アニメーション期間:1 秒;
            }
            .timezone .timeLeft:n番目の子(2){
                -webkit アニメーション期間:1.5 秒;
            }
            .timezone .time:n番目の子(3){
                -webkit アニメーション期間:2s;
            }
            .timezone .timeLeft:n番目の子(4){
                -webkit アニメーション期間:2.5 秒;
            }
            @-webkit-keyframes showIn{
                0%,70%{
                    不透明度: 0;
                }
                100%{
                    不透明度: 1;
                }
            }
            .timezone .time h2,.timezone .timeLeft h2{
                位置: 絶対;
                左マージン: -120px;
                上マージン: 3px;
                色:#eee;
                フォントサイズ: 14px;
                カーソル:ポインタ;
                -webkit-animation: showIn 3s イージー;
            }
            .timezone .timeLeft h2{
                左マージン: 60px;
                幅: 100ピクセル;
            }
            .timezone .time:hover,.timezone .timeLeft:hover{
                border:4px 実線ライトブルー;
                背景：レモンシフォン;
                ボックスの影: 0 0 2px 2px rgba(255,255,255,0.4);
            }
            .timezone .time div、.timezone .timeLeft div{
                位置: 絶対;
                上位:50%;
                上マージン: -25px;
                左:50px;
                幅: 300ピクセル;
                高さ: 50px;
                背景: 水色;
                境界線:3px 実線 #eee;
                境界線の半径: 10px;
                zインデックス: 2;
                オーバーフロー: 非表示;
                カーソル:ポインタ;
                -webkit-animation: showIn 3s イージー;
                -webkit-transition: すべて 0.5 秒;
            }
            .timezone .timeLeft div{
                左:-337px;
            }
            .timezone .time div:hover、.timezone .timeLeft div:hover{
                高さ: 170ピクセル;
            }
            .timezone .time div p、.timezone .timeLeft div p{
                色: #fff;
                フォントの太さ: 太字;
                テキスト配置: 中央;
            }
            .timezone .time:before,.timezone .timeLeft:before{
                コンテンツ： '';
                位置: 絶対;
                上:0px;
                左: 32px;
                幅: 0px;
                高さ: 0px;
                border:10px 透明実線;
                右ボーダー:10px 実線 #eee;
                zインデックス:-1;
                -webkit-animation: showIn 3s イージー;
            }
            .timezone .timeLeft:before{
                左:-33px;
                border:10px 透明実線;
                左境界線:10px 実線 #eee;
            }
            .timezone .time div ul、.timezone .timeLeft div ul{
                リストスタイル: なし;
                幅:300ピクセル;
                パディング:5px 0 0;
                上境界線:2px 実線 #eee;
                色:#fff;
                テキスト配置: 中央;
            }
            .timezone .time div li、.timezone .timeLeft div li{
                表示: インラインブロック;
                高さ: 25px;
                行の高さ: 25px;
            }