@CHARSET "UTF-8";

/*基本円（外側） 色は濃い目*/
.circle {
    position: relative;
    width: 120px;
    height: 120px;
    background: #333;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

/*50％より後に動く*/
.circle::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -60px;
    width: 120px;
    height: 120px;
    background: #999;
    transform-origin: right 60px;
    z-index: 2;
    animation: rotate-circle-left 2s linear forwards;
    animation-iteration-count: infinite;
}

/*先に動く*/
.circle::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 60px;
    width: 120px;
    height: 120px;
    background: #999;
    transform-origin: left 60px;
    z-index: 3;
    animation: rotate-circle-right 2s linear forwards;
    animation-iteration-count: infinite;
}

/*中心円*/
.circle .circle-inner {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 62px;
    padding-top: 38px;
    background: #fff;
    border-radius: 50%;
    z-index: 4;
}

@keyframes rotate-circle-right {
    0%   {
        transform: rotate(0deg);
        background: #999;
    }
    50%  {
        transform: rotate(180deg);
        background: #999;
    }
    50.01% {
        transform: rotate(360deg);
        background: #333;
    }
    100% {
        transform: rotate(360deg);
        background: #333;
    }
}

@keyframes rotate-circle-left {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}