Pokeball Solo CSS

by Martin Miranda

HTML

<div id="wrapper">
    <div id="container">
        <div id="sombra"></div>
        <div id="pokeball">
            <div id="roja" class="parte"></div>
            <div id="centro">
                <div id="circulo">
                    <div id="mini-circulo"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="sombraInferior">
</div>

CSS

@-moz-keyframes sombraIzq {
    0% {
        width:70%;
    }
    30% {
        width:120%;
    }
    60% {
        width:70%;
    }
    85% {
        width:70%;
    }
    100% {
        width:70%;
    }
}
@keyframes sombraIzq {
    0% {
        width:70%;
    }
    30% {
        width:120%;
    }
    60% {
        width:70%;
    }
    85% {
        width:70%;
    }
    100% {
        width:70%;
    }
}
@-moz-keyframes sombraDer {
    0% {
        width:70%;
    }
    30% {
        width:70%;
    }
    60% {
        width:120%;
    }
    85% {
        width:70%;
    }
    100% {
        width:70%;
    }
}
@keyframes sombraDer {
   0% {
        width:70%;
    }
    30% {
        width:70%;
    }
    60% {
        width:120%;
    }
    85% {
        width:70%;
    }
    100% {
        width:70%;
    }
}
@-moz-keyframes atrapado {
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(-45deg);
    }
    60% {
        transform:rotate(45deg);
    }
    85% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(0deg);
    }
}
@keyframes atrapado {
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(-45deg);
    }
    60% {
        transform:rotate(45deg);
    }
    85% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(0deg);
    }
}
@-moz-keyframes atrapado {
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(-45deg);
    }
    60% {
        transform:rotate(45deg);
    }
    85% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(0deg);
    }
}
@keyframes sombraInterior {
    0% {
        transform:rotate(0deg);
    }
    30% {
        transform:rotate(45deg);
    }
    60% {
        transform:rotate(-45deg);
    }
    85% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(0deg);
    }
}
@-moz-keyframes sombraInterior {
    0% {
        transform:rotate(0deg);
    }
    30% {
       ...