$time: .3s;

// 透明动画
@keyframes opacity_show {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes opacity_hide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.__iduty_opacity_active {
    animation: opacity_show $time;
    -webkit-animation: opacity_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_opacity_hide {
    animation: opacity_hide $time;
    -webkit-animation: opacity_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 缩放动画
@keyframes scale_show {
    from {
        opacity: 0;
        transform: scale3d(0,0,0);
    }
    to {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}
@keyframes scale_hide {
    from {
        opacity: 1;
        transform: scale3d(1,1,1);
    }
    to {
        transform: scale3d(0,0,0);
        opacity: 0;
    }
}
.__iduty_scale_show {
    animation: scale_show $time;
    -webkit-animation: scale_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_scale_hide {
    animation: scale_hide $time;
    -webkit-animation: scale_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 移动动画 Y轴 Bottom
@keyframes bottom_show {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes bottom_hide {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
    }
}
.__iduty_bottom_show {
    animation: bottom_show $time;
    -webkit-animation: bottom_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_bottom_hide {
    animation: bottom_hide $time;
    -webkit-animation: bottom_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 移动动画 Y轴 Top
@keyframes top_show {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes top_hide {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0);
    }
}
.__iduty_top_show {
    animation: top_show $time;
    -webkit-animation: top_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_top_hide {
    animation: top_hide $time;
    -webkit-animation: top_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 移动动画 X轴 Left
@keyframes left_show {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes left_hide {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
}
.__iduty_left_show {
    animation: left_show $time;
    -webkit-animation: left_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_left_hide {
    animation: left_hide $time;
    -webkit-animation: left_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 移动动画 X轴 Right
@keyframes right_show {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes right_hide {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
    }
}
.__iduty_right_show {
    animation: right_show $time;
    -webkit-animation: right_show $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.__iduty_right_hide {
    animation: right_hide $time;
    -webkit-animation: right_hide $time;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


// 旋转动画
@keyframes rotate_show {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.__iduty_rotate_show {
    animation: rotate_show 1s infinite linear;
    -webkit-animation: rotate_show 1s infinite linear;
}