@keyframes rotation_left01{
    from{
        transform:rotate(0);
        opacity:1;
    }
    to{
        transform:rotate(120deg);
        opacity:0;
    }
}

@keyframes rotation_left02{
    from{
        transform:rotate(-120deg);
        opacity:0;
    }
    to{
        transform:rotate(0);
        opacity:1;
    }
}


@keyframes rotation_right01{
    from{
        transform:rotate(0);
        opacity:1;
    }
    to{
        transform:rotate(-120deg);
        opacity:0;
    }
}

@keyframes rotation_right02{
    from{
        transform:rotate(120deg);
        opacity:0;
    }
    to{
        transform:rotate(0deg);
        opacity:1;
    }
}

@keyframes opa_dis{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

@keyframes opa_ab{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}



@keyframes left_op_dis{
    from{
        opacity:1;
        transform:translateX(0);
    }
    to{
        opacity:0;
        transform:translateX(-30%);
    }
}
@keyframes right_op_dis{
    from{
        opacity:1;
        transform:translateX(0);
    }
    to{
        opacity:0;
        transform:translateX(30%);
    }
}

@keyframes left_op_ab{
    from{
        opacity:0;
        transform:translateX(30%);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
@keyframes right_op_ab{
    from{
        opacity:0;
        transform:translateX(-30%);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}