CSSでページをペラペラさせてみる

ページが自動でペラペラしてくれます

html

<div id="note">
    <div id="page1"><span>Fin.</span></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <div id="page4"></div>
    <div id="page5"></div>
    <div id="page6"></div>
    <div id="page7"></div>
    <div id="page8"></div>
    <div id="page9"></div>
    <div id="page10"></div>
</div>

css3

        #note{
            width: 600px;
            height: 400px;
            position: absolute;
            top: 25%;
            left: 25%;
        }
        div[id^='page']{
            width:300px;
            height: 400px;
            position: absolute;
            background-color: #fff;
            box-shadow: 1px 1px 2px #666;
            top: 0;
            left: 300px;
            transform-origin: 0% 50%;
        }
        #page10{
            animation: pera1 1.3s ease-out infinite;
        }
        #page9{
            animation: pera2 1.3s ease-out infinite;
        }
        #page8{
            animation: pera3 1.3s ease-out infinite;
        }
        #page7{
            animation: pera4 1.3s ease-out infinite;
        }
        #page6{
            animation: pera5 1.3s ease-out infinite;
        }
        #page5{
            animation: pera6 1.3s ease-out infinite;
        }
        #page4{
            animation: pera7 1.3s ease-out infinite;
        }
        #page3{
            animation: pera8 1.3s ease-out infinite;
        }
        #page2{
            animation: pera9 1.3s ease-out infinite;
        }
        #page1 span{
            padding-top: 160px;
            padding-left: 100px;
            text-align: center;
            font-size:60px;
            display: inline-block;
        }
        @keyframes pera1
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera2
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            10%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera3
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            20%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera4
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            30%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera5
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            40%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera6
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            50%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera7
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            60%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera8
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            70%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }
        @keyframes pera9
        {
            0%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            80%{
                transform: rotateY(0deg);
                -webkit-transform: rotateY(0deg);
            }
            100%{
                -webkit-transform: rotateY(-180deg);
                -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }
        }