css3 动画 旋转移动

废话不多说，直接上代码

// css
.ellipse-rotate {
                width: 100px;
                height: 100px;
                position: absolute;
                -webkit-transition-property: -webkit-transform;
                -webkit-transition-duration: 1s;
                -moz-transition-property: -moz-transform;
                -moz-transition-duration: 1s;
                -webkit-animation: rotate 6s linear infinite;
                -moz-animation: rotate 6s linear infinite;
                animation: rotate 6s linear infinite;
                
            }
            .ellipse-move{
                -webkit-animation:move 10s infinite;
            animation: move 10s infinite;
                top: 80%;
                position: relative;
            }
            @-webkit-keyframes move {
                from {
                   top: 800px;
                }
                to {
                   top: 10px;
                }
            }
             @keyframes move {
                from {
                   top: 800px;
                }
                to {
                   top: 10px;
                }
            }
             @-moz-keyframes move {
                from {
                   top: 800px;
                }
                to {
                   top: 10px;
                }
            }
             @-o-keyframes move {
                from {
                   top: 800px;
                }
                to {
                   top: 10px;
                }
            }
            
            
            
            @-webkit-keyframes rotate {
                from {
                    -webkit-transform: rotate(0deg)
                }
                to {
                    -webkit-transform: rotate(360deg)
                }
            }
            
            @-moz-keyframes rotate {
                from {
                    -moz-transform: rotate(0deg)
                }
                to {
                    -moz-transform: rotate(359deg)
                }
            }
            
            @-o-keyframes rotate {
                from {
                    -o-transform: rotate(0deg)
                }
                to {
                    -o-transform: rotate(359deg)
                }
            }
            
            @keyframes rotate {
                from {
                    transform: rotate(0deg)
                }
                to {
                    transform: rotate(359deg)
                }
            }
            
            .horizontal {
                background-color: #f58f98;
                width: 100%;
                height: 50%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                position: absolute;
                top: 25%;
            }
            
            .vertical {
                background-color: #f58f98;
                height: 100%;
                width: 50%;
                position: absolute;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                left: 25%;
            }

//html
<div class="ellipse-move">
            
            <div class="ellipse-rotate ">
                <div class=" horizontal">
    
                </div>
                <div class="vertical">
                </div>
            </div>
        </div>

原理也很简单，主要把CSS3 的keyframes规则运用灵活就行