翻页日历动画

样式：

<style>
        @-webkit-keyframes flipTop {
            0% {
                -webkit-transform: perspective(400px) rotateX(0deg);
                background-color: #ffdcdc;
            }

            100% {
                -webkit-transform: perspective(400px) rotateX(-90deg);
                background-color: #fff4f4;
            }
        }

        @-webkit-keyframes flipBottom {
            0% {
                -webkit-transform: perspective(400px) rotateX(90deg);
            }

            100% {
                -webkit-transform: perspective(400px) rotateX(0deg);
            }
        }

        @-moz-keyframes flipTop {
            0% {
                -webkit-transform: perspective(400px) rotateX(0deg);
                background-color: #ffdcdc;
            }

            100% {
                -webkit-transform: perspective(400px) rotateX(-90deg);
                background-color: #fff4f4;
            }
        }

        @-moz-keyframes flipBottom {
            0% {
                -moz-transform: perspective(400px) rotateX(90deg);
            }

            100% {
                -moz-transform: perspective(400px) rotateX(0deg);
            }
        }

        @-ms-keyframes flipTop {
            0% {
                -ms-transform: perspective(400px) rotateX(0deg);
            }

            100% {
                -ms-transform: perspective(400px) rotateX(-90deg);
            }
        }

        @-ms-keyframes flipBottom {
            0% {
                -ms-transform: perspective(400px) rotateX(90deg);
            }

            100% {
                -ms-transform: perspective(400px) rotateX(0deg);
            }
        }

        .flipTimer {
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 0.373rem;
            height: 0.68rem;
            color: #ff4b5c;
            display: inline-block;
        }
        [data-dpr='1'] .flipTimer{
            font-size: 14px;
        }
        [data-dpr='2'] .flipTimer{
            font-size: 28px;
        }
        [data-dpr='3'] .flipTimer{
            font-size: 42px;
        }
        .flipTimer .digit-set {
            border-radius: .133333rem;
             .506667rem;
            height: 100%;
            display: inline-block;
            position: relative;
            border-radius: .053333rem;
            -webkit-box-shadow: 0 .04rem .066667rem #ffa1a1;
            -moz-box-shadow: 0 .04rem .066667rem #ffa1a1;
            box-shadow: 0 .04rem .066667rem #ffa1a1;
        }

        .flipTimer .digit {
            position: absolute;
            height: 100%;
             100%;
            display:block;
        }

        .flipTimer .digit > div {
            position: absolute;
            left: 0;
            overflow: hidden;
            height: 50%;
             100%;
            display: block;
        }

        .flipTimer .digit > div.digit-top, .flipTimer .digit > div.shadow-top {
            background-color: #fff4f4;
            box-sizing: border-box;
            top: 0;
            z-index: 0;
        }

        .flipTimer .digit > div.digit-top:before, .flipTimer .digit > div.shadow-top:before {
            content: "";
            height: 100%;
             100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .flipTimer .digit > div.shadow-top {
            opacity: 0;
            -webkit-transition: opacity 0.3s ease-in;
        }

        .flipTimer .digit > div.digit-bottom, .flipTimer .digit > div.shadow-bottom {
            background-color: #fff4f4;
            bottom: 0;
            z-index: 0;
        }

        .flipTimer .digit > div.digit-bottom .digit-wrap, .flipTimer .digit > div.shadow-bottom .digit-wrap {
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .digit-wrap{
            padding-top: 1px;
            display: table-cell;
            text-align: center;
             .506667rem;
            height: 0.68rem;
            line-height: 1;
            vertical-align: middle;
        }

        .flipTimer .digit > div.digit-bottom:before, .flipTimer .digit > div.shadow-bottom:before {
            content: "";
            height: 100%;
             100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .flipTimer .digit > div.shadow-bottom {
            opacity: 0;
            -webkit-transition: opacity 0.3s ease-in;
        }

        .flipTimer .digit.previous .digit-top,
        .flipTimer .digit.previous .shadow-top {
            opacity: 1;
            z-index: 2;
            -webkit-transform-origin: 50% 100%;
            -webkit-animation: flipTop 0.3s ease-in both;
            -moz-transform-origin: 50% 100%;
            -moz-animation: flipTop 0.3s ease-in both;
            -ms-transform-origin: 50% 100%;
            -ms-animation: flipTop 0.3s ease-in both;
            transform-origin: 50% 100%;
            animation: flipTop 0.3s ease-in both;
        }

        .flipTimer .digit.previous .digit-bottom,
        .flipTimer .digit.previous .shadow-bottom {
            z-index: 1;
            opacity: 1;
        }

        .flipTimer .digit.active .digit-top {
            z-index: 1;
            background-color: #ffdcdc;
            border-radius: .053333rem;
        }

        .flipTimer .digit.active .digit-bottom {
            z-index: 2;
            -webkit-transform-origin: 50% 0%;
            -webkit-animation: flipBottom 0.3s 0.3s ease-out both;
            -moz-transform-origin: 50% 0%;
            -moz-animation: flipBottom 0.3s 0.3s ease-out both;
            -ms-transform-origin: 50% 0%;
            -ms-animation: flipBottom 0.3s 0.3s ease-out both;
            transform-origin: 50% 0%;
            animation: flipBottom 0.3s 0.3s ease-out both;
        }

/*延迟*/
.delay1 .digit-top,.delay1 .shadow-top,.delay1 .digit-bottom{
    animation-delay:600ms !important;
    -webkit-animation-delay:600ms !important;
}
.delay2 .digit-top,.delay2 .shadow-top,.delay2 .digit-bottom{
    animation-delay:800ms !important;
    -webkit-animation-delay:800ms !important; 
}
.delay3 .digit-top,.delay3 .shadow-top,.delay3 .digit-bottom{
    animation-delay:1000ms !important;
    -webkit-animation-delay:1000ms !important; /* Safari 和 Chrome */
}

　　

</style>

　　html

<div class="flipTimer">
                <div class="digit-set">
                    <div class="digit jsTop active">
                        <div class="digit-top">
                            <span class="digit-wrap">0</span>
                        </div>
                        <div class="shadow-top"></div>
                        <div class="digit-bottom">
                            <span class="digit-wrap">0</span>
                        </div>
                        <div class="shadow-bottom"></div> 
                    </div>
                    <div class="digit jsBm previous">
                        <div class="digit-top">
                            <span class="digit-wrap"></span>
                        </div>
                        <div class="shadow-top"></div>
                        <div class="digit-bottom">
                            <span class="digit-wrap"></span>
                        </div>
                        <div class="shadow-bottom"></div>
                    </div>
                </div>
            </div>

　　js动画调用：

 function run(el,num){
        el.find(".previous .digit-wrap").html(num);
        var top = el.find(".jsTop"),
            bm =  el.find(".jsBm")
        if (top.hasClass("previous")) {
            top.addClass("active").removeClass("previous");
            bm.addClass("previous").removeClass("active");
        } else {
            top.addClass("previous").removeClass("active");
            bm.addClass("active").removeClass("previous");
        }
    }