/**
    闪烁动画
 */
@keyframes twinkle {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}
@-webkit-keyframes twinkle {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}
@-o-keyframes twinkle {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}
@-moz-keyframes twinkle {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}
/**
    文字 渐入 上升显示动画 X轴默认偏移-50%
 */
@keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@-webkit-keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@-o-keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@-moz-keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
/**
    文字 渐入 上升显示动画 X轴不偏移
 */
@keyframes textFadeInUpY {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}
@-webkit-keyframes textFadeInUpY {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}
@-o-keyframes textFadeInUpY {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}
@-moz-keyframes textFadeInUpY {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%);
    }
}
/**
    云剪辑背景左右移动
 */
@keyframes cloudBgLRMove {
    0% {
        transform: translateX(0%);
    }
    25% {
        transform: translateX(-1%);
    }
    50% {
        transform: translateX(-2%);
    }
    75% {
        transform: translateX(-3%);
    }
    100% {
        transform: translateX(-4%);
    }
}
/**
    虚拟主播描述从左往右渐入
 */
@keyframes vanchorDescFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-o-keyframes vanchorDescFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes vanchorDescFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes vanchorDescFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-20%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/**
    虚拟主播装饰等待后渐入
 */
@keyframes vanchorDecorationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes vanchorDecorationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes vanchorDecorationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes vanchorDecorationFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/**
    自动校色 校色前图片宽度动画
 */
@keyframes autoBeforeWidth {
    0% {
        width: 50%;
    }
    40% {
        width: 75%;
    }
    60% {
        width: 75%;
    }
    100% {
        width: 55%;
    }
}
@-o-keyframes autoBeforeWidth {
    0% {
        width: 50%;
    }
    40% {
        width: 75%;
    }
    60% {
        width: 75%;
    }
    100% {
        width: 55%;
    }
}
@-moz-keyframes autoBeforeWidth {
    0% {
        width: 50%;
    }
    40% {
        width: 75%;
    }
    60% {
        width: 75%;
    }
    100% {
        width: 55%;
    }
}
@-webkit-keyframes autoBeforeWidth {
    0% {
        width: 50%;
    }
    40% {
        width: 75%;
    }
    60% {
        width: 75%;
    }
    100% {
        width: 55%;
    }
}
/**
    自动校色 校色前图片宽度动画
 */
@keyframes autoLineLeft {
    0% {
        left: 50%;
    }
    40% {
        left: 75%;
    }
    60% {
        left: 75%;
    }
    100% {
        left: 55%;
    }
}
@-o-keyframes autoLineLeft {
    0% {
        left: 50%;
    }
    40% {
        left: 75%;
    }
    60% {
        left: 75%;
    }
    100% {
        left: 55%;
    }
}
@-moz-keyframes autoLineLeft {
    0% {
        left: 50%;
    }
    40% {
        left: 75%;
    }
    60% {
        left: 75%;
    }
    100% {
        left: 55%;
    }
}
@-webkit-keyframes autoLineLeft {
    0% {
        left: 50%;
    }
    40% {
        left: 75%;
    }
    60% {
        left: 75%;
    }
    100% {
        left: 55%;
    }
}
/**
    ar附加图片渐入
 */
@keyframes arAttachFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes arAttachFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes arAttachFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes arAttachFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/**
    智能剪辑剪辑 从左到右显示动画
 */
@keyframes interLToR {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}
/**
    智能剪辑剪辑 从右到左显示动画
 */
@keyframes interRToL {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
/**
    智能剪辑 开始图片部分 1-1（1行1列 下同）位移、缩放动画
 */
@keyframes interImgStart11 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(20%, 250%) scale(1.09, 0.68);
    }
}
/**
    智能剪辑 开始图片部分 1-2位移、缩放动画
 */
@keyframes interImgStart12 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(300%, 250%) scale(2.21, 0.68);
    }
}
/**
    智能剪辑 开始图片部分 1-4位移、缩放动画
 */
@keyframes interImgStart14 {
    from {
        transform: translate(0, 0) scale(1, 1);
        opacity: 1;
    }
    to {
        transform: translate(-250%, 250%) scale(0.8, 0.68);
    }
}
/**
    智能剪辑 开始图片部分 1-6位移、缩放动画
 */
@keyframes interImgStart16 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(-30%, 250%) scale(1.24, 0.7);
    }
}
/**
    智能剪辑 开始图片部分 2-1位移、缩放动画
 */
@keyframes interImgStart21 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(780%, 120%) scale(1.95, 0.7);
    }
}
/**
    智能剪辑 开始图片部分 2-3位移、缩放动画
 */
@keyframes interImgStart23 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(-10%, 120%) scale(1.52, 0.68);
    }
}
/**
    智能剪辑 开始图片部分 2-5位移、缩放动画
 */
@keyframes interImgStart25 {
    from {
        transform: translate(0, 0) scale(1, 1);
    }
    to {
        transform: translate(420%, 120%) scale(1.04, 0.7);
    }
}
/**
    智能剪辑图片渐出动画
 */
@keyframes interImgFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/**
    智能剪辑图片渐入动画
 */
@keyframes interImgFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/**
    智能剪辑图片下拉动画
 */
@keyframes interImgPullDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(120%);
    }
}
/**
    每次轮播到赋予动画
 */
.swiper-slide-active .home-banner-item-text {
    animation: textFadeInUpY 1s 0.3s linear both;
}
.home-banner-item-text {
    transform: translateY(-50%);
}
.swiper-slide-active .home-banner-item-cloud-bg {
    animation: cloudBgLRMove 5s 0.5s linear forwards;
}
.swiper-slide-active .home-banner-item-anchor-desc {
    animation: vanchorDescFadeInRight 1s 0.5s linear both;
}
.swiper-slide-active .home-banner-item-anchor-decoration {
    animation: vanchorDecorationFadeIn 1s 1s linear both;
}
.swiper-slide-active .home-banner-item-auto-before {
    animation: autoBeforeWidth 4s 0.5s linear both;
}
.swiper-slide-active .home-banner-item-auto-line {
    animation: autoLineLeft 4s 0.5s linear both;
}
.swiper-slide-active .home-banner-item-ar-attach {
    animation: arAttachFadeIn 1s 0.5s linear both;
}
.swiper-slide-active .home-banner-item-inter-fdo {
    animation: interRToL 1s 2.5s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start11 {
    animation: interImgStart11 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start12 {
    animation: interImgStart12 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start14 {
    animation: interImgStart14 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start16 {
    animation: interImgStart16 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start21 {
    animation: interImgStart21 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start23 {
    animation: interImgStart23 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-start25 {
    animation: interImgStart25 1s 1s linear both, interImgFadeOut .5s 2s linear both;
}
.swiper-slide-active .home-banner-item-inter-img-pull {
    animation: interImgFadeIn .5s 2s linear both, interImgPullDown 1s 2.5s linear both;
}


/**
    拓扑图动画
 */
/**
    展示拓扑1的线条部分
 */
@keyframes topology1-3 {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}
@-o-keyframes topology1-3 {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}
/**
    拓扑渐入
 */
@keyframes topologyFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes topologyFadeIn {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}
/**
    展示拓扑标题
 */
@keyframes topologyTitle {
    from {
        height: 0;
    }
    to {
        height: 40px;
    }
}
/**
    拓扑2圆圈放大出现
 */
@keyframes topologyZoom {
    from {
        transform: scale(0, 0);
    }
    to {
        transform: scale(1, 1);
    }
}
/**
    拓扑3顶部外层圆圈旋转
 */
@keyframes topologyRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
/**
    拓扑3顶部内层圆圈反向旋转
 */
@keyframes topologyRotateInner {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}
/**
    拓扑3展示线条
 */
@keyframes topologyLineMask {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}
/**
    拓扑2左侧线移动
 */
@keyframes topology2LeftShake {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(25px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(-25px);
    }
    100% {
        transform: translateX(0px);
    }
}
/**
    拓扑2右侧线移动
 */
@keyframes topology2RightShake {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-25px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(25px);
    }
    100% {
        transform: translateX(0px);
    }
}