@-webkit-keyframes image-slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@keyframes image-slide-top {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }

    to {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}
@-webkit-keyframes image-slide-right {
    0% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px)
    }

    to {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
    }
}
@keyframes image-slide-right {
    0% {
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes image-slide-left {
    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes image-slide-left {
    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }

    to {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
/*圆点缩放动画*/
@-webkit-keyframes twinkling {
    0%{
        opacity: 0.2;
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 0.5;
        -webkit-transform: scale(1.12);
    }
    100% {
        opacity: 0.2;
        -webkit-transform: scale(1);
    }
}
@keyframes twinkling {
    0%{
        opacity: 0.2;
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 0.5;
        -webkit-transform: scale(1.12);
    }
    100% {
        opacity: 0.2;
        -webkit-transform: scale(1);
    }
}
@keyframes fedui-show
{
    from {top:65px;}
    to {top:75px;}
}

@-webkit-keyframes fedui-show /*Safari and Chrome*/
{
    from {top:65px;}
    to {top:75px;}
}
/*淡入*/
@keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}

/* 飞入效果 */
@keyframes slideIn {
    0% {
      left: -100%; /* 初始位置在页面左侧以外 */
    }
    100% {
      left: 0; /* 最终位置在页面的左侧 */
    }
}
/* 悬浮效果 */
@keyframes translate {
    0% { transform: translateY(10px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(10px); }
}
@keyframes translate1 {
    0% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(-10px); }
}
/* 放大缩小效果 */
@keyframes warn {
    0% {
        transform:scale(1);
        opacity:1
    }
    25% {
        transform:scale(0.6);
        opacity:.4
    }
    50% {
        transform:scale(0.8);
        opacity:.8
    }
    75% {
        transform:scale(1.2);
        opacity:.9
    }
    100% {
        transform:scale(1);
        opacity:1
    }
}
@keyframes warn1 {
    0% {
        transform:scale(1);
        opacity:1
    }
    25% {
        transform:scale(1.2);
        opacity:.4
    }
    50% {
        transform:scale(0.8);
        opacity:.8
    }
    75% {
        transform:scale(0.6);
        opacity:.9
    }
    100% {
        transform:scale(1);
        opacity:1
    }
}
/* 弹跳效果 */
@keyframes swing {
    0% {
        -webkit-transform: scale(1);
        transform: translateY(0);
      }
    
    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: translateY(-20px);
      }
    
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);  
      }
    
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
      }
    
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: translateY(0);
      }
}