css3动画

【注意】最重要的是：要搞清楚在开始，结束或者中间某个点，应该是怎么样的效果，而不是考虑从一个点到一个点怎么过渡的，只要把每个点的应该是什么效果弄好就可以了。不用管过渡。

eg：

　　实现效果是div从无到有，且旋转180度显示

         <style>
            .first{
                width:100px;
                height:100px;
                background:red;
                opacity:0;
                transform-style:preserve-3d;
                tranform-origin:50% 50%;
                animation:mymove 5s infinite;
                -webkit-animation:mymove 5s infinite;
            }
            @keyframes mymove{
                from{
                    opacity:0;
                    transform:rotateY(-180deg);
                }
                to{
                    opacity:1;
                    transform:rotateY(0deg);
                }
            }
            @-webkit-keyframes mymove{
                from{
                    opacity:0;
                    transform:rotateY(-180deg);
                }
                to{
                    opacity:1;
                    transform:rotateY(0deg);
                }
            }
        </style>
    
        <div class="first">2</div>